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是一套描述产品目标运行环境的工具,它被广泛用在各种涉及浏览器移动端的兼容性支持工具中,详细配置规则参考:https//github.com/browserslist/browserslist
-
备注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 } }], }, })