一、webpack简介
官网：https://www.webpackjs.com/
1.webpack是什么
- Webpack是一种前端资源构建工具，一个静态模块打包器(module bundler)。
- 在 webpack 看来,前端的所有资源文件(js/json/css/img/less/…都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。
2.webpack的五个核心概念
2.1 webpack 五个核心概念
2.1.1 Entry
- 入口(Entry)指示webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。
2.1.2 Output
- 输出(Output)指示webpack 打包后的资源bundles 输出到哪里去，以及如何命名。
2.1.3 Loader
- Loader 让webpack 能够去处理那些非JavaScript 文件(webpack 自身只处理JavaScript)
2.1.4 Plugins
- 插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
2.1.5 Mode
- 模式(Mode)指示webpack 使用相应模式的配置。
| 选项 | 描述 | 特点 |
|---|---|---|
| development | 会将DefinePlugin 中process.env.NODE_ENV 的值设置 为development。启用NamedChunksPlugin 和 NamedModulesPlugin。 | 能让代码本地调试 运行的环境 |
| production | 会将DefinePlugin 中process.env.NODE_ENV 的值设置 为production。启用FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和TerserPlugin。 | 能让代码优化上线 运行的环境 |
二、webpack的使用
1.webpack的安装
注意：webpack的运行需要依赖node.js，需要先安装好node.js
- 初始化package.json文件
- 在项目的根目录下，需要创建一个包配置文件package.json，通过命令进行初始化
- 命令：npm init（注意：命名时不能有大写和中文，其他的设置默认按确定即可）
- 全局安装
- 可以直接调用相应的包
- 命令：npm i webpack webpack-cli -g
- 局部安装
- 在全局安装后，每一个项目下都应该安装一个webpack
- 命令：npm i webpack webpack-cli -D
- 目录结构
- 生产环境
- webpack ./src/index.js -o ./build/built.js --mode=production
- webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到./build/built.js整体打包环境，是生产环境
- 开发环境:
- 创建一个json文件
- data.json
{"name": "zhangsan","age": 18
}
- 在js中引入json文件
- 重新进行打包，发现webpack是可以处理js代码和json数据的
- 结论:
- webpack能处理js/json资源，不能处理css/img等其他资源
- 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
- 生产环境比开发环境多一个压缩js代码的步骤。
（2）打包样式资源
- 直接使用webpack打包是不能对样式资源进行打包的，因此需要借助loader才能对样式文件进行打包。
- 引入loader需要创建一个webpack.config.js文件
- webpack.config.js：webpack的配置文件
- 作用:指示 webpack干哪些活（当运行 webpack指令时，会加载里面的配置)
- 所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs（一般在配置中的模块化采用的是commonjs，而在源代码中采用的是ES6语法）。
打包css文件
- webpack.config.js
const {resolve} = require('path')module.exports = {//入口起点entry:'./src/js/index.js',//输出output:{//输出文件名filename:'built.js',//输出路径//__dirname是nodejs的变量，代表当前文件目录的绝对路径，后面接的build指的是当前目录下的build文件夹path:resolve(__dirname,'build')},//loader的配置module:{rules:[//详细loader配置{//匹配以css文件结尾的文件test: /\.css$/,//use数组中的loader执行顺序是：从右到左，或着从下到上，依次执行//css-loader将css文件变成commonjs模块加载在js中，里面的内容是样式字符串//style-loader创建style标签，将js中的样式资源插入进去，添加到header中生效use: ['style-loader', 'css-loader']}]},//plugin的配置// plugins:[// //详细plugin的配置// ],mode:'development',// mode:'production',
}
- 具体的配置可以参照官网，不仅是css资源，其他资源也有对应的配置
- 安装css-loader和style-loader
- 配置完成，创建相应的css文件，并且在入口文件index.js中引入
- index.css
html, body{margin: 0;padding: 0;height: 100%;background-color: pink;
}
- 执行webpack进行打包，在配置好webpack.config.js后，可以只输入webpack命令即可对项目进行的打包
- 打包成功后生成对应的文件，css代码加载在js代码中
- 在index.html中引入built.js
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>index</title>
</head>
<body>
<script src="../build/built.js"></script>
</body>
</html>
打包less，不同的文件需要配置不同的loader，所以打包less文件需要重新配置一下
- webpack.config.js
const {resolve} = require('path')module.exports = {//入口起点entry:'./src/js/index.js',//输出output:{//输出文件名filename:'built.js',//输出路径//__dirname是nodejs的变量，代表当前文件目录的绝对路径，后面接的build指的是当前目录下的build文件夹path:resolve(__dirname,'build')},//loader的配置module:{rules:[//详细loader配置{//匹配以css文件结尾的文件test: /\.css$/,//use数组中的loader执行顺序是：从右到左，或着从下到上，依次执行//css-loader将css文件变成commonjs模块加载在js中，里面的内容是样式字符串//style-loader创建style标签，将js中的样式资源插入进去，添加到header中生效use: ['style-loader', 'css-loader']},{test: /\.less$/,//less-loader的作用是将less文件转换为css文件use: ['style-loader','css-loader','less-loader']}]},//plugin的配置// plugins:[// //详细plugin的配置// ],//生产模式还是开发模式mode:'development',// mode:'production',
}
- 安装less-loader，注意安装less-loader时需要安装less
- index.less
#title{color:#fff;
}
- 在index.html中引入
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>index</title>
</head>
<body>
<h1 id="title">hello</h1>
<script src="../build/built.js"></script>
</body>
</html>
（3）打包html资源
- webpack.config.js
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {//入口起点entry:'./src/js/index.js',//输出output:{//输出文件名filename:'built.js',//输出路径//__dirname是nodejs的变量，代表当前文件目录的绝对路径，后面接的build指的是当前目录下的build文件夹path:resolve(__dirname,'build')},//loader的配置module:{rules:[//详细loader配置{//匹配以css文件结尾的文件test: /\.css$/,//use数组中的loader执行顺序是：从右到左，或着从下到上，依次执行//css-loader将css文件变成commonjs模块加载在js中，里面的内容是样式字符串//style-loader创建style标签，将js中的样式资源插入进去，添加到header中生效use: ['style-loader', 'css-loader']},{test: /\.less$/,//less-loader的作用是将less文件转换为css文件use: ['style-loader','css-loader','less-loader']}]},//plugin的配置plugins:[//详细plugin的配置new HtmlWebpackPlugin()],//生产模式还是开发模式mode:'development',// mode:'production',
}
- 局部安装html-webpack-plugin
- 执行打包命令
- new HtmlWebpackPlugin()的功能就是默认成一个html文件，并引入打包输出的所有资源，需要有结构的html文件，则需要在括号中配置。
（4）打包图片资源
- 下载安装loader 包
npm install --save-dev html-loader url-loader file-loader
- webpack.config.js
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/index.js',output: {filename: 'built.js',path: resolve(__dirname, 'build')},module: {rules: [{test: /\.less$/,// 要使用多个loader处理用useuse: ['style-loader', 'css-loader', 'less-loader']},{// 问题：默认处理不了html中img图片// 处理图片资源test: /\.(jpg|png|gif)$/,// 使用一个loader// 下载 url-loader file-loaderloader: 'url-loader',options: {// 图片大小小于8kb，就会被base64处理// 优点: 减少请求数量（减轻服务器压力）// 缺点：图片体积会更大（文件请求速度更慢）limit: 8 * 1024,// 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs// 解析时会出问题：[object Module]// 解决：关闭url-loader的es6模块化，使用commonjs解析esModule: false,// 给图片进行重命名// [hash:10]取图片的hash的前10位// [ext]取文件原来扩展名name: '[hash:10].[ext]'}},{test: /\.html$/,// 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）loader: 'html-loader'}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'})],mode: 'development'
};（5） 打包其他资源
- webpack.config.js
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {entry: './src/index.js',output: {filename: 'built.js',path: resolve(__dirname, 'build')},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']},// 打包其他资源(除了html/js/css 资源以外的资源){// 排除css/js/html 资源exclude: /\.(css|js|html|less)$/,loader: 'file-loader',options: {name: '[hash:10].[ext]'}}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'})],mode: 'development'
};
（6）devserver
- webpack.config.js
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {entry: './src/index.js',output: {filename: 'built.js',path: resolve(__dirname, 'build')},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']},// 打包其他资源(除了html/js/css 资源以外的资源){// 排除css/js/html 资源exclude: /\.(css|js|html|less)$/,loader: 'file-loader',options: {name: '[hash:10].[ext]'}}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'})],mode: 'development',devServer: {// 项目构建后路径contentBase: resolve(__dirname, 'build'),// 启动gzip 压缩compress: true,// 端口号port: 3000,// 自动打开浏览器open: true}
};
- 启动命令
npx webpack-dev-server
（7）开发环境配置总结
- webpack.config.js
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {entry: './src/js/index.js',output: {filename: 'js/built.js',path: resolve(__dirname, 'build')},module: {rules: [// loader 的配置{// 处理less 资源test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader']},{// 处理css 资源test: /\.css$/,use: ['style-loader', 'css-loader']},{// 处理图片资源test: /\.(jpg|png|gif)$/,loader: 'url-loader',options: {limit: 8 * 1024,name: '[hash:10].[ext]',// 关闭es6 模块化esModule: false,outputPath: 'imgs'}},{// 处理html 中img 资源test: /\.html$/,loader: 'html-loader'},{// 处理其他资源exclude: /\.(html|js|css|less|jpg|png|gif)/,loader: 'file-loader',options: {name: '[hash:10].[ext]',outputPath: 'media'}}]},plugins: [// plugins 的配置new HtmlWebpackPlugin({template: './src/index.html'})],mode: 'development',devServer: {contentBase: resolve(__dirname, 'build'),compress: true,port: 3000,open: true}
};
3.webpack的使用（生产环境）
（1）提取css 成单独文件
- 安装插件
npm install --save-dev mini-css-extract-plugin
- webpack.config.js
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {entry: './src/js/index.js',output: {filename: 'js/built.js',path: resolve(__dirname, 'build')},module: {rules: [{test: /\.css$/,use: [// 创建style 标签，将样式放入// 'style-loader',// 这个loader 取代style-loader。作用：提取js 中的css 成单独文件MiniCssExtractPlugin.loader,// 将css 文件整合到js 文件中'css-loader']}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'}),new MiniCssExtractPlugin({// 对输出的css 文件进行重命名filename: 'css/built.css'})],mode: 'development'
};
（2） css 兼容性处理
- 下载loader
npm install --save-dev postcss-loader postcss-preset-env
- webpack.config.js
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 设置nodejs 环境变量
// process.env.NODE_ENV = 'development';
module.exports = {entry: './src/js/index.js',output: {filename: 'js/built.js',path: resolve(__dirname, 'build')},module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader,'css-loader',{loader: 'postcss-loader',options: {ident: 'postcss',plugins: () => [// postcss 的插件require('postcss-preset-env')()]}}]}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'}),new MiniCssExtractPlugin({filename: 'css/built.css'})],mode: 'development'
};
- package.json
"browserslist": {"development": ["last 1 chrome version","last 1 firefox version","last 1 safari version"],"production": [">0.2%","not dead","not op_mini all"]
}
（3）压缩css
- 下载插件
npm install --save-dev optimize-css-assets-webpack-plugin
- webpack.config.js
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 设置nodejs 环境变量
// process.env.NODE_ENV = 'development';
module.exports = {entry: './src/js/index.js',output: {filename: 'js/built.js',path: resolve(__dirname, 'build')},module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader,'css-loader',{loader: 'postcss-loader',options: {ident: 'postcss',plugins: () => [// postcss 的插件require('postcss-preset-env')()]}}]}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'}),new MiniCssExtractPlugin({filename: 'css/built.css'}),// 压缩cssnew OptimizeCssAssetsWebpackPlugin()],mode: 'development'
};
（4） js 语法检查
- 下载loader
npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import
- webpack.config.js
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 设置nodejs 环境变量
// process.env.NODE_ENV = 'development';
module.exports = {entry: './src/js/index.js',output: {filename: 'js/built.js',path: resolve(__dirname, 'build')},module: {rules: [/*语法检查： eslint-loader eslint注意：只检查自己写的源代码，第三方的库是不用检查的设置检查规则：package.json 中eslintConfig 中设置~"eslintConfig": {"extends": "airbnb-base"}airbnb --> eslint-config-airbnb-base eslint-plugin-import eslint*/{test: /\.js$/,exclude: /node_modules/,loader: 'eslint-loader',options: {// 自动修复eslint 的错误fix: true}}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'}),new MiniCssExtractPlugin({filename: 'css/built.css'}),// 压缩cssnew OptimizeCssAssetsWebpackPlugin()],mode: 'development'
};
- package.json
"eslintConfig": {"extends": "airbnb-base","env": {"browser": true}
}
（5）js 兼容性处理
- 下载loader
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/polyfill core-js
- webpack.config.js
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {entry: './src/js/index.js',output: {filename: 'js/built.js',path: resolve(__dirname, 'build')},module: {rules: [{test: /\.js$/,exclude: /node_modules/,loader: 'babel-loader',options: {// 预设：指示babel 做怎么样的兼容性处理presets: [['@babel/preset-env',{// 按需加载useBuiltIns: 'usage',// 指定core-js 版本corejs: {version: 3},// 指定兼容性做到哪个版本浏览器targets: {chrome: '60',firefox: '60',ie: '9',safari: '10',edge: '17'}}]]}}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'})],mode: 'development'};
（6） js 压缩
- webpack.config.js
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {entry: './src/js/index.js',output: {filename: 'js/built.js',path: resolve(__dirname, 'build')},plugins: [new HtmlWebpackPlugin({template: './src/index.html'})],// 生产环境下会自动压缩js 代码mode: 'production'
};
（7）HTML 压缩
- webpack.config.js
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {entry: './src/js/index.js',output: {filename: 'js/built.js',path: resolve(__dirname, 'build')},plugins: [new HtmlWebpackPlugin({template: './src/index.html',// 压缩html 代码minify: {// 移除空格collapseWhitespace: true,// 移除注释removeComments: true}})],mode: 'production'
};
（8）生产环境配置总结
- webpack.config.js
const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 定义nodejs 环境变量：决定使用browserslist 的哪个环境
process.env.NODE_ENV = 'production';
// 复用loader
const commonCssLoader = [MiniCssExtractPlugin.loader,'css-loader',{// 还需要在package.json 中定义browserslistloader: 'postcss-loader',options: {ident: 'postcss',plugins: () => [require('postcss-preset-env')()]}}
];
module.exports = {entry: './src/js/index.js',output: {filename: 'js/built.js',path: resolve(__dirname, 'build')},module: {rules: [{test: /\.css$/,use: [...commonCssLoader]},{test: /\.less$/,use: [...commonCssLoader, 'less-loader']}, /*正常来讲，一个文件只能被一个loader 处理。当一个文件要被多个loader 处理，那么一定要指定loader 执行的先后顺序：先执行eslint 在执行babel*/{// 在package.json 中eslintConfig --> airbnbtest: /\.js$/,exclude: /node_modules/,// 优先执行enforce: 'pre',loader: 'eslint-loader',options: {fix: true}},{test: /\.js$/,exclude: /node_modules/,loader: 'babel-loader',options: {presets: [['@babel/preset-env',{useBuiltIns: 'usage',corejs: {version: 3},targets: {chrome: '60',firefox: '50'}}]]}},{test: /\.(jpg|png|gif)/,loader: 'url-loader',options: {limit: 8 * 1024,name: '[hash:10].[ext]',outputPath: 'imgs',esModule: false}},{test: /\.html$/,loader: 'html-loader'},{exclude: /\.(js|css|less|html|jpg|png|gif)/,loader: 'file-loader',options: {outputPath: 'media'}}]},plugins: [new MiniCssExtractPlugin({filename: 'css/built.css'}),new OptimizeCssAssetsWebpackPlugin(),new HtmlWebpackPlugin({template: './src/index.html',minify: {collapseWhitespace: true,removeComments: true}})],mode: 'production'
};
三、webpack5
- 通过持久缓存提高构建性能.
- 使用更好的算法和默认值来改善长期缓存.
- 通过更好的树摇和代码生成来改善捆绑包大小.
- 清除处于怪异状态的内部结构，同时在 v4 中实现功能而不引入任何重大更改.
- 通过引入重大更改来为将来的功能做准备，以使我们能够尽可能长时间地使用 v5.
自动删除 Node.js Polyfills
早期，webpack 的目标是允许在浏览器中运行大多数 node.js 模块，但是模块格局发生了变化，许多模块用途现在主要是为前端目的而编写的。webpack <= 4 附带了许多 node.js 核心模块的 polyfill，一旦模块使用任何核心模块（即 crypto 模块），这些模块就会自动应用。
尽管这使使用为 node.js 编写的模块变得容易，但它会将这些巨大的 polyfill 添加到包中。在许多情况下，这些 polyfill 是不必要的。
webpack 5 会自动停止填充这些核心模块，并专注于与前端兼容的模块。
迁移：
- 尽可能尝试使用与前端兼容的模块。
- 可以为 node.js 核心模块手动添加一个 polyfill。错误消息将提示如何实现该目标。
Chunk 和模块 ID
添加了用于长期缓存的新算法。在生产模式下默认情况下启用这些功能。
chunkIds: "deterministic", moduleIds: "deterministic"
Chunk ID
你可以不用使用 import(/* webpackChunkName: "name" */ "module") 在开发环境来为 chunk 命名，生产环境还是有必要的
webpack 内部有 chunk 命名规则，不再是以 id(0, 1, 2)命名了
Tree Shaking
- webpack 现在能够处理对嵌套模块的 tree shaking
// inner.js
export const a = 1;
export const b = 2;// module.js
import * as inner from './inner';
export { inner };// user.js
import * as module from './module';
console.log(module.inner.a);
在生产环境中, inner 模块暴露的 b 会被删除
- webpack 现在能够多个模块之前的关系
import { something } from './something';function usingSomething() {return something;
}export function test() {return usingSomething();
}
当设置了"sideEffects": false时，一旦发现test方法没有使用，不但删除test，还会删除"./something"
- webpack 现在能处理对 Commonjs 的 tree shaking
Output
webpack 4 默认只能输出 ES5 代码
webpack 5 开始新增一个属性 output.ecmaVersion, 可以生成 ES5 和 ES6 / ES2015 代码.
如：output.ecmaVersion: 2015
SplitChunk
// webpack4
minSize: 30000;
// webpack5
minSize: {javascript: 30000,style: 50000,
}
Caching
// 配置缓存
cache: {// 磁盘存储type: "filesystem",buildDependencies: {// 当配置修改时，缓存失效config: [__filename]}
}
缓存将存储到 node_modules/.cache/webpack
监视输出文件
之前 webpack 总是在第一次构建时输出全部文件，但是监视重新构建时会只更新修改的文件。
此次更新在第一次构建时会找到输出文件看是否有变化，从而决定要不要输出全部文件。
默认值
entry: "./src/index.jsoutput.path: path.resolve(__dirname, "dist")output.filename: "[name].js"
