让webpack将css单独打包
style-loader: 他的作用是在html中创建一个style标签，然后将js中的css写入该style中，这样就使得js文件非常大，可能出现闪屏现象，所以要将css文件提取出，单打打包。
mini-css-extract-plugin该插件就可以提供一个loader来将css单独打包。
module: { rules: [ // 处理css { test: /.css$/, use: [ // 将js中的css单独打包 MiniCssExtractPlugin.loader, 'css-loader' ] } ] }, plugins: [ new MiniCssExtractPlugin({ // 命名打包后的文件 filename: 'static/built.css' }) ],
处理css的兼容性问题
需要安装postcss-loader, postcss-preset-env。
npm install --save-dev postcss-loader postcss-preset-env
需要在package.json中配置开发环境和生产环境中的兼容。
浏览器的兼容性处理请访问github.com/browserslis…
"browserslist": { "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ], "production": [ ">0.2%", "not dead", "not op_mini all" ] }
而且打包时，webpack默认是按照生产环境来做css的兼容性处理的。如果想要按照开发环境处理，我们需要在webpack.config.js中配置环境变量
process.env.NODE_ENV = 'development';
module: { rules: [ // 处理css { test: /.css$/, use: [ // 将js中的css单独打包 MiniCssExtractPlugin.loader, 'css-loader', { loader: 'postcss-loader', options: { postcssOptions: { // webpack 4配置 // ident: 'postcss', // plugins: () = [ // require('postcss-preset-env')() // ] // webpack 5配置 plugins: [require('postcss-preset-env')()] } } } ] } ] },
网络异常，图片无法展示
|
压缩css文件
安装optimize-css-assets-webpack-plugin插件。然后引入使用即可
// 压缩css文件 const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin") plugins: [ new OptimizeCssAssetsWebpackPlugin() ],
让webpack支持做js语法检查
安装包：npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import
在package.json中配置检查规则
"eslintConfig": { "extends": "airbnb-base", "env": { "browser": true } }
在webpack.config.js中配置检查
module: { rules: [ { // webpack对js语法做检查 test: /.js$/, exclude: /node_modules/, loader: 'eslint-loader', // 当一个文件需要加载多个loader时，指定谁先执行。 enforce: 'pre', options: { // 自动修复 eslint 的错误 fix: true, }, }, ], },
或者通过eslint-webpack-plugin插件
// 检查js代码 const EslintWebpackPlugin = require('eslint-webpack-plugin'); plugins: [ new EslintWebpackPlugin(), ],
处理js的兼容性问题
安装包：npm install --save-dev babel-loader @babel/core @babel/preset-env core-js
如果不需要将js全部做兼容性：就不需要下载并引入@babel/polyfill包。
module: { rules: [ // 处理js的兼容性 { 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', }, }]], }, }, ], },
压缩js，html文件
直接将mode属性设置成production。表示在生产环境中，他会自动压缩js文件和html文件。
网络异常，图片无法展示
|
或者指定html中压缩项
plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', // 压缩 html 代码 minify: { // 移除空格 collapseWhitespace: true, // 移除注释 removeComments: true } }), ],
fullhash(hash) | chunkhash | contenthash区别
- fullhash：整个项目使用相同的hash值，当一个文件改变，整个项目的hash值将会改变。
网络异常，图片无法展示
|
- chunkhash：每一个入口文件中的依赖hash值是相同的。
网络异常，图片无法展示
|
改变b.js文件
网络异常，图片无法展示
|
这里需要注意一下，当我们使用多入口打包，并且使用splitChunks进行分包时，多个文件引入的相同依赖单独打包，改变这个chunk文件时是不会影响其他打包输出的文件chunkhash值的变化的。但是如果是改变动态import导入的文件，那么不管是引入该文件的文件还是import引入的文件，他们的chunkhash都会改变。
- contenthash：为每一个文件生成独一为二的hash值，改变一个文件，不会影响其他文件。
网络异常，图片无法展示
|
随便改变一个文件
网络异常，图片无法展示
|
生产环境中的完整配置
同一个类型文件加载loader，我们需要搞清楚他的优先级。防止不必要的错误。就好像js文件需要检查代码规范和js的兼容性。代码检查的优先级就比js兼容性的高。所以需要先加载eslint-loader，在加载babel-loader。这是我们可以分开写（可以指定enforce： ‘pre’)，或者将loader写在use数组中。
const { resolve } = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); // 压缩css文件 const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); // 检查js代码 // const EslintWebpackPlugin = require('eslint-webpack-plugin'); // process.env.NODE_ENV = 'development'; module.exports = { entry: './src/js/index.js', // 将打包后的文件放在哪 output: { filename: 'built.js', path: resolve(__dirname, 'build'), }, module: { rules: [ // 处理css { test: /.css$/, use: [ // 将js中的css单独打包 MiniCssExtractPlugin.loader, 'css-loader', { loader: 'postcss-loader', options: { postcssOptions: { // webpack 4配置 // ident: 'postcss', // plugins: () = [ // require('postcss-preset-env')() // ] // webpack 5配置 plugins: [require('postcss-preset-env')()], }, }, }, ], }, // 处理scss { test: /.sass|scss$/, use: [ // 将js中的css单独打包 MiniCssExtractPlugin.loader, 'css-loader', { loader: 'postcss-loader', options: { postcssOptions: { // webpack 4配置 // ident: 'postcss', // plugins: () = [ // require('postcss-preset-env')() // ] // webpack 5配置 plugins: [require('postcss-preset-env')()], }, }, }, 'sass-loader', ], }, // 处理图片 { test: /.(png|gif|jpg|jpeg)/, use: [ { loader: 'url-loader', options: { limit: 8 * 1024, name: '[name].[hash:10].[ext]', outputPath: 'static/imgs', esModule: false, }, }, ], type: 'javascript/auto', }, // 处理html中的图片 { test: /.html$/, loader: 'html-loader', }, // 处理其他资源 { // 排除 css/js/html 资源 exclude: /.(css|js|html|sass|json|png|gif|jpg|jpeg)$/, loader: 'file-loader', options: { name: '[hash:10].[ext]', outputPath: 'static/others', }, }, // { // // webpack对js语法做检查 // test: /.js$/, // exclude: /node_modules/, // loader: 'eslint-loader', // // 当一个文件需要加载多个loader时，指定谁先执行。 // enforce: 'pre', // options: { // // 自动修复 eslint 的错误 // fix: true, // }, // }, // 处理js的兼容性 { test: /.js$/, exclude: /node_modules/, use: [ { 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', }, }]], }, }, { loader: 'eslint-loader', options: { // 自动修复 eslint 的错误 fix: true, }, }, ], }, ], }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', // 压缩 html 代码 minify: { // 移除空格 collapseWhitespace: true, // 移除注释 removeComments: true, }, }), new MiniCssExtractPlugin({ // 命名打包后的文件 filename: 'static/css/built.css', }), new OptimizeCssAssetsWebpackPlugin(), // new EslintWebpackPlugin(), ], mode: 'production', };
构建代码已上传githubgithub.com/zhang-glitc…
总结自b站尚硅谷webpack www.bilibili.com/video/BV1e7…
