webpack4基础配置教程（二）-----生产环境

webpack4基础配置教程（二）-----生产环境

生产环境准备：

1.提取css为单独文件

安装插件 npm install mini-css-extract-plugin@1 -d 引入插件 //引入MiniCssExtractPlugin，用于提取css为单个文件 const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 配置loader //配置解析css { test: /.css$/, //该loader要处理的文件 use: [ MiniCssExtractPlugin.loader, // css-loader //将css文件变成commonjs模块加载到js中，里面的内容是样式字符串 ] }, //配置解析less { test: /.less$/, //该loader要处理的文件 use: [ MiniCssExtractPlugin.loader, css-loader, less-loader //将less文件编译成css文件 ] }, 配置plugins //实例化MiniCssExtractPlugin new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional filename: "css/index.css" //css输出的位置 }) 注意：由于提取独立文件，要从外部引入，所以可能会有路径问题，解决方案是在output配置中，添加：publicPath：‘/’，publicPath根据实际情况自行调整

2.css兼容性处理

都2022年，IE都无了，说实话兼容性问题了解即可 安装loader npm install postcss postcss-loader postcss-preset-env -d webpack4可能有版本的问题 因为css和less样式文件都要进行兼容性处理，所以我们定义好一个通用的配置： //css相关loader的配置 const baseCssLoader = [ MiniCssExtractPlugin.loader, css-loader, { loader: "postcss-loader", options: { postcssOptions: { plugins: [ "postcss-preset-env", ], }, }, }, ] 配置package.json，在其中追加browserslist配置，通过配置加载指定的css兼容性样式 "browserslist": { //开发环境 "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ], //生产环境：默认是生产环境 "production": [ ">0.2%",//兼容市面上99.8%的浏览器 "not dead",//"死去"的浏览器不能兼容，例如IE8 "not op_mini all",//不做Opera浏览器mini版的兼容 "ie 10"//兼容IE10 ] 备注1：browserlist是一套描述产品目标运行环境的工具，它被广泛用在各种涉及浏览器移动端的兼容性支持工具中，详细配置规则参考： 备注2：若出现版本不兼容，或配置不正确的错误，那么需更换依赖包版本

3.js语法检查

概述：对js基本语法错误/隐患，进行提前检查 安装loader npm install eslint-loader eslint 安装检查规则库： npm install eslint-config-airbnb-base eslint-plugin-import 备注：eslint-config-airbnb-base定制了一套标准的、常用的js语法检查规则，推荐使用 配置loader { // 对js进行语法检查 test: /.js$/, exclude: /node_modules/, // 优先执行 enforce: pre, loader: eslint-loader, options: { fix: true //若有问题自动修复，重要！！！！ } }, 修改package.json "eslintConfig": { "extends": "airbnb-base", "env": { "browser": true } } 备注：若出现：warning Unexpected console statement no-console 警告，意识是不应该在项目中写console.log()，若想忽略，就在要忽略检查代码的上方输入一行注释://eslint-disable-next-line即可.

4.js语法转换

概述：将浏览器不能识别的新语法转换成原来识别的旧语法，做浏览器兼容性处理 安装loader npm install babel-loader @babel/core @babel/preset-env --save -dev 配置loader { test: /.js$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: [@babel/preset-env] } } }

5.js兼容性处理

安装包 npm install @babel/polyfill 使用 app.js import @babel/polyfill;//包含es6的高级语法的转换

6.压缩html、压缩js

直接修改webpack.prod.js中的mode为production即可 备注：若设置了模式为production报错 ，必须在new HtmlWebpackPlugin时添加配置minify:false

7.压缩css

安装插件 npm install optimize-css-assets-webpack-plugin --save -dev 引入插件 //引入OptimizeCssAssetsPlugin，用于压缩css const OptimizeCssAssetsPlugin = require(optimize-css-assets-webpack-plugin); 配置插件 new OptimizeCssAssetsPlugin({ cssProcessorPluginOptions: { preset: [default, { discardComments: { removeAll: true } }], }, })