三、Webpack 生产环境的基本配置

五、生产环境的基本配置

---

开发环境配置主要目的是为了能让代码 1.性能更好 2.兼容性更好 3.能在线上环境正常运行

1. 提取 Css 成单独文件

对css文件进行优化处理, 提取css成单独的文件 好处：

• 将css从style变成link导入，解决闪屏问题
• 将css从js抽离出来了，可以减少js的体积，增加js的加载速度
  
  

安装命令：npm install mini-css-extract-plugin -d

//webpack.config.js文件

const MiniCssExtractorPlugin = require('mini-css-extract-plugin')

// webpack配置
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.css$/,
        MiniCssExtractPlugin.loader,  // 这个loader取代style-loader。作用：提取js中的css成单独文件
        'css-loader' // 将css文件整合到js文件中
      },
      //...
    ],
  },
    
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/built.css', // 对输出的css文件进行重命名
    }),
  ],

  // 生产环境
  mode: 'production'
}

2. Css的兼容性处理

css兼容性处理需要使用到一个库 postcss 这个库在webpack中使用需要 postcss-loader 和 postcss-preset-env插件

注：需要在package.json增加配置选项

下载：npm install postcss-loader postcss-preset-env -d

//webpack.config.js文件

const MiniCssExtractorPlugin = require('mini-css-extract-plugin')

//webpack配置
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
             // css兼容性的处理，修改css-loader的配置, 同时需要在package.json中browserslist里面增加配置
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                // postcss的插件
                require('postcss-preset-env')()
              ]
            }
          }
        ]
      },
      //...
    ],
  },
    
  plugins: [
    //...
  ],

  // 生产环境
  mode: 'production'
}

//package.json文件
"browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
},

3. 压缩Css文件

插件：npm install optimize-css-assets-webpack-plugin -d

//webpack.config.js文件

//css压缩插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

//webpack配置
module.exports = {
  //...
    
  plugins: [
    // 压缩css
    new OptimizeCssAssetsWebpackPlugin()
    //...
  ],

  // 生产环境
  mode: 'production'
}

4. JavaScript 语法检查

JavaScript的语法检查库：eslint Webpack中对应得库是eslint和eslint-loader，检查规则在package.json中设置

检查规则使用的是airbnb 对于的库为eslint-config-airbnb-base 而此库依赖eslint和eslint-plugin-import

1.检查js的语法是否有错误

2.统一js的写法规范，统一写法风格

下载相关库命令：

npm install eslint-loader -d
npm install eslint -d
npm install eslint-config-airbnb-base -d
npm install eslint-plugin-import -d

//webpack.config.js文件

//webpack配置
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.js$/, //js语法检查
        exclude: /node_modules/,
        loader: 'eslint-loader', //不检查第三方库
        options: {
          fix: true // 检查出错误后，自动修复eslint的错误
        }
      },
      //...
    ],
  },

  // 生产环境
  mode: 'production'
}

5. JavaScript 兼容性处理

需要用到的库 babel-loader 可以将es6的语法转换成es5的语法, babel-loader 依赖于@babel/core库和@babel/preset-env
但babel-loader库有个缺点，他只能转换基本语法，有些es6高级语法如promise就不能转换
所以此时我们还需增加一个库core-js，@babel/preset-env和core-js配合就可以实现兼容性的处理，并会按需加载


下载相关库命令：

npm install babel-loader -d
npm install @babel/core -d
npm install @babel/preset-env -d
npm install core-js -d

//webpack.config.js文件

//webpack配置
module.exports = {
  //...
  module: {
    rules: [
      {  
        test: /\.js$/,  //js的兼容性处理
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          // 预设：指示babel做怎么样的兼容性处理
          presets: [
            [
              '@babel/preset-env',
              {
                // 按需加载
                useBuiltIns: 'usage',
                // 指定core-js版本
                corejs: {
                  version: 3
                },
                // 指定兼容性做到哪个版本浏览器
                targets: {
                  chrome: '60',
                  firefox: '60',
                  ie: '9',
                  safari: '10',
                  edge: '17'
                }
              }
            ]
          ]
        }
      //...
    ],
  },
    
  plugins: [
    //...
  ],

  // 生产环境
  mode: 'production'
}

//正常来说 一个类型只能被一个loader处理，但如果一个文件要被多个loader处理，比如js的语法和兼容性检查
//那么就要指定执行先后顺序, 字段: enforece:'pre'
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.js$/, // js语法检查
        exclude: /node_modules/,
        loader: 'eslint-loader', 
        enforce: 'pre',  // 优先执行此顺序
        options: {
          fix: true 
        }
      },
      {  
        test: /\.js$/, // js兼容性处理
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: 'usage',
                corejs: {
                  version: 3
                },
                targets: {
                  chrome: '60',
                  firefox: '60',
                  ie: '9',
                  safari: '10',
                  edge: '17'
                }
              }
            ]
          ]
        }
      //...
    ],
  },
    
  plugins: [
    //...
  ],
      
  // 生产环境
  mode: 'production',
}

6. JS的压缩和Html的压缩

js在生产环境下会自动进行js压缩
html的压缩则需要配置插件

//webpack.config.js文件

//webpack配置
module.exports = {
  //...
    
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      // 压缩html代码
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true
      }
    }),
    //...
  ],
  
  // 生产环境
  mode: 'production',
}

7. 生产环境的基本配置 完整写法

//webpack.config.js文件

const { resolve } = require('path')
const MiniCssExtractorPlugin = require('mini-css-extract-plugin')
const OptimiziCssAssetsWebpackPlugin = require('optimizi-css-assets-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 定义node.js的环境变量，决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production'

// 复用loader的写法
const commonCssLoader = [
  // 这个loader取代style-loader。作用：提取js中的css成单独文件然后通过link加载
  MiniCssExtractPlugin.loader,
  // css-loader：将css文件整合到js文件中
  // 经过css-loader处理后，样式文件是在js文件中的
  // 问题：1.js文件体积会很大2.需要先加载js再动态创建style标签，样式渲染速度就慢，会出现闪屏现象
  // 解决：用MiniCssExtractPlugin.loader替代style-loader
  'css-loader',
  /*
    postcss-loader：css兼容性处理：postcss --> 需要安装：postcss-loader postcss-preset-env
    postcss需要通过package.json中browserslist里面的配置加载指定的css兼容性样式
    在package.json中定义browserslist：
    "browserslist": {
      // 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development
      "development": [ // 只需要可以运行即可
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ],
      // 生产环境。默认是生产环境
      "production": [ // 需要满足绝大多数浏览器的兼容
        ">0.2%",
        "not dead",
        "not op_mini all"
      ]
    },
  */
  {
    loader: 'postcss-loader',
    options: {
      ident: 'postcss', // 基本写法
      plugins: () => [
        // postcss的插件
        require('postcss-preset-env')(),
      ],
    },
  },
]

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [...commonCssLoader],
      },
      {
        test: /\.less$/,
        use: [...commonCssLoader, 'less-loader'],
      },
      /*
        正常来讲，一个文件只能被一个loader处理
        当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序
        先执行eslint再执行babel（用enforce）
      */
      {
        /*
          js的语法检查： 需要下载 eslint-loader eslint
          注意：只检查自己写的源代码，第三方的库是不用检查的
          airbnb(一个流行的js风格) --> 需要下载 eslint-config-airbnb-base eslint-plugin-import
          设置检查规则：
            package.json中eslintConfig中设置
              "eslintConfig": {
                "extends": "airbnb-base"， // 继承airbnb的风格规范
                "env": {
                  "browser": true // 可以使用浏览器中的全局变量(使用window不会报错)
                }
              }
        */
        test: /\.js$/,
        exclude: /node_modules/, // 忽略node_modules
        enforce: 'pre', // 优先执行
        loader: 'eslint-loader',
        options: {
          // 自动修复
          fix: true,
        },
      },
      /*
        js兼容性处理：需要下载 babel-loader @babel/core
          1. 基本js兼容性处理 --> @babel/preset-env
            问题：只能转换基本语法，如promise高级语法不能转换
          2. 全部js兼容性处理 --> @babel/polyfill
            问题：只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了
          3. 需要做兼容性处理的就做：按需加载  --> 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: '50',
                ie: '9',
                safari: '10',
                edge: '17'
              },
            },
          ],
        },
      },
      {
        // 图片处理
        test: /\.(jpg|png|gif)/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          outputPath: 'imgs',
          esModule: false, // 关闭url-loader默认使用的es6模块化解析
        },
      },
      // html中的图片处理
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      // 处理其他文件
      {
        exclude: /\.(js|css|less|html|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
          outputPath: 'media',
        },
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      // 对输出的css文件进行重命名
      filename: 'css/built.css',
    }),
    // 压缩css
    new OptimiziCssAssetsWebpackPlugin(),
    // HtmlWebpackPlugin：html文件的打包和压缩处理
    // 通过这个插件会自动将单独打包的样式文件通过link标签引入
    new HtmlWebpackPlugin({
      template: './src/index.html',
      // 压缩html代码
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true,
      },
    }),
  ],
  // 生产环境
  mode: 'production',
}