css 处理

css提取

1. 下载包

npm i -D mini-css-extract-plugin

2. 配置

 module: {    rules: [      {        test: /\.css$/,        use: [          // 'style-loader', // 创建style标签，将样式加入js文件          MiniCssExtractPlugin.loader, // 提取js中的css成单独的文件          'css-loader',        ]      },     ]  },  plugins: [    new HtmlWebpackPlugin({      template: './src/index.html'    }),    new MiniCssExtractPlugin({      filename: 'css/budle.css'    })  ], 

css兼容性处理

1. 下载包

npm i -D postcss-loader postcss-preset-env

2. 配置

Webpack.config.js

 rules: [    {      test: /\.css$/,      use: [        // 'style-loader', // 创建style标签，将样式加入js文件        MiniCssExtractPlugin.loader, // 提取js中的css成单独的文件        'css-loader',        // css兼容性处理：postcss ---> postcss-loader  postcss-preset-env        // 帮postcss找到package.json中的browerslist里面的配置，通过配置加载指定的css兼容性样式        /**                  * "browserslist": {                  *   // 开发环境 --> 设置node环境变量： process.env.NODE_ENV = development 才能生效                     "development": [                     "last 1 chrome version",                     "last 2 firefox version",                     "last 1 safari version"                     ],                     // 生产环境:默认看生产环境                     "production":[                     "> 0.2%",                     "not dead",                     "not op_mini all"                     ]                 }                  */        {          loader: 'postcss-loader',          options: {            postcssOptions: {              plugins:  [                'postcss-preset-env'              ]            },          }        }      ]    },   ] 

package.json

 "browserslist": {     "development": [       "last 1 chrome version",       "last 2 firefox version",       "last 1 safari version"     ],     "production": [       "> 0.1%",       "not dead",       "not op_mini all"     ]   } 

压缩css

1. 下载包

npm i css-minimizer-webpack-plugin -D

 plugins: [   // 压缩css   new CssMinimizerWebpackPlugin() ], 

js压缩

1. mode设置为生产模式即可，生产环境自动压缩js

mode: "production"

html压缩

plugins: [   new HtmlWebpackPlugin({     template: './src/index.html',     minify: {       // 移除空格       collapseWhitespace: true,       // 移除注释       removeComments: true,     }   }), ] 

eslint

1. 下载包

npm i -D eslint eslint-webpack-plugin eslint-plugin-import eslint-config-airbnb-base

2. 配置

Webpack.config.js

 plugins: [    new ESLintWebpackPlugin({      exclude: '/node_modules/',      fix: true,    })  ], 

Package.json
根配置，配置eslint标准

"eslintConfig": {   "extends": "airbnb-base" } 

js兼容

1. 下载包

npm i -D babel-loader @babel/preset-env @babel/core @babel/polyfill core-js

2. 配置

module: {   rules: [      {        //  1. js兼容性处理： babel-loader @babel/core  @babel/preset-env        //  问题：babel只能转换基础的语法，如promise则不能进行转换        //  2. 全部兼容  @babel/polyfill        //  问题：可以解决兼容性问题，但是引入了所有的兼容性代码，体积太大        //  3. 需要做兼容性的处理就ok，按需加载---> core-js        test: /\.js$/,        exclude: /node_modules/,        loader: 'babel-loader',        options: {          // 预设： 指示babel做怎样的兼容性处理          presets: [[            '@babel/preset-env',            {              useBuiltIns: 'usage', //按需加载              corejs: {                version: 3, // 指定core-js版本              },              targets: {  // 指定兼容浏览器版本                chrome: '60',                firefox: '60',                ie: '9',                safari: '10',                edge: '17'              }            }          ]]        }      }   ] } 

在入口文件(src/index.js)引入@babel/polyfill

import '@babel/polyfill';

方案2和方案三选一种即可
方案2

module: {   rules: [       {        test: /\.js$/,        exclude: /node_modules/,        loader: 'babel-loader',        options: {          // 预设： 指示babel做怎样的兼容性处理          presets: [[            '@babel/preset-env',          ]]        }      }   ] } 

在入口文件引入 @babel/polyfill

import '@babel/polyfill';

方案3

module: {   rules: [      {        //  1. js兼容性处理： babel-loader @babel/core  @babel/preset-env        //  问题：babel只能转换基础的语法，如promise则不能进行转换        //  2. 全部兼容  @babel/polyfill        //  问题：可以解决兼容性问题，但是引入了所有的兼容性代码，体积太大        //  3. 需要做兼容性的处理就ok，按需加载---> core-js        test: /\.js$/,        exclude: /node_modules/,        loader: 'babel-loader',        options: {          // 预设： 指示babel做怎样的兼容性处理          presets: [[            '@babel/preset-env',            {              useBuiltIns: 'usage', //按需加载              corejs: {                version: 3, // 指定core-js版本              },              targets: {  // 指定兼容浏览器版本                chrome: '60',                firefox: '60',                ie: '9',                safari: '10',                edge: '17'              }            }          ]]        }      }   ] }