webpack生产环境下的配置

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'
             }
           }
         ]]
       }
     }
  ]
}