webpack生产环境下的配置

css 处理

css提取

下载包

npm i -D mini-css-extract-plugin

配置

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兼容性处理

下载包

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

配置

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

下载包

npm i css-minimizer-webpack-plugin -D

复制代码

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

js压缩

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

mode: "production"

html压缩

复制代码

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

eslint

下载包

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

配置

Webpack.config.js

复制代码

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

Package.json

根配置，配置eslint标准

复制代码

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

js兼容

下载包

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

配置

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