生产环境与开发环境的不同

相比于开发环境，生产环境需要额外考虑以下几个方面：

  1. 样式文件需要单独抽取
  2. css 兼容性处理
  3. css / js / html 文件压缩
  4. js 风格检查
  5. js 兼容性处理

一个典型的生产环境配置如下

  1. const {resolve} = require('path') // path 属于 node.js 的自带模块
  2. const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  3. const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
  4. const HtmlWebpackPlugin = require('html-webpack-plugin')
  6. // 定义node.js的环境变量，决定使用browserslist的哪个环境
  7. process.env.NODE_ENV = 'production'
  9. const commonCssLoader = [
  10.   // 这个loader取代style-loader。作用：提取js中的css成单独文件然后通过link加载
  11.   MiniCssExtractPlugin.loader,
  12.   // css-loader：将css文件整合到js文件中
  13.   'css-loader',
  14.   /*
  15.     postcss-loader：css兼容性处理：postcss --> 需要安装：postcss-loader postcss-preset-env
  16.     postcss需要通过package.json中browserslist里面的配置加载指定的css兼容性样式
  17.     在package.json中定义browserslist：
  18.     "browserslist": {
  19.       // 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development
  20.       "development": [ // 只需要可以运行即可
  21.         "last 1 chrome version",
  22.         "last 1 firefox version",
  23.         "last 1 safari version"
  24.       ],
  25.       // 生产环境。默认是生产环境
  26.       "production": [ // 需要满足绝大多数浏览器的兼容
  27.         ">0.2%",
  28.         "not dead",
  29.         "not op_mini all"
  30.       ]
  31.     },
  32.   */
  33.   {
  34.     loader: 'postcss-loader',
  35.     options: {
  36.       postcssOptions: {
  37.         plugins: [
  38.           [
  39.             'postcss-preset-env',
  40.             {
  41.               ident: "postcss"
  42.             },
  43.           ],
  44.         ],
  45.       },
  46.     },
  47.   },
  48. ]
  50. module.exports = {
  51.   entry:'./src/js/index.js',
  52.   output: {
  53.     filename: 'js/built.js',
  54.     path: resolve(__dirname, 'build')
  55.   },
  56.   module: {
  57.     rules:[
  58.       {
  59.         test: /\.css/,
  60.         use: commonCssLoader,
  61.       },
  62.       {
  63.         test: /\.less/,
  64.         use:[ ...commonCssLoader, 'less-loader']
  65.       },
  66.       /*
  67.         正常来讲，一个文件只能被一个loader处理
  68.         当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序
  69.         先执行eslint再执行babel（用enforce）
  70.       */
  71.       {
  72.         test: /\.js$/,
  73.         exclude: /node_modules/, // 忽略node_modules
  74.         enforce: 'pre', // 优先执行
  75.         loader: 'eslint-loader',
  76.         options: {
  77.           // 自动修复
  78.           fix: true,
  79.         },
  80.       },
  81.        /*
  82.         js兼容性处理：需要下载 babel-loader @babel/core
  83.           1. 基本js兼容性处理 --> @babel/preset-env
  84.             问题：只能转换基本语法，如promise高级语法不能转换
  85.           2. 全部js兼容性处理 --> @babel/polyfill
  86.             问题：只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了
  87.           3. 需要做兼容性处理的就做：按需加载
  88.       */
  89.       {
  90.         // 第三种方式：按需加载
  91.         test: /\.js$/,
  92.         exclude: /node_modules/,
  93.         loader: 'babel-loader',
  94.         options: {
  95.           // 预设：指示babel做怎样的兼容性处理
  96.           presets: [
  97.             [
  98.               '@babel/preset-env', // 基本预设
  99.               {
  100.                 useBuiltIns: 'usage', // polyfill 按需加载
  101.                 corejs: { version: 3 }, // 指定core-js版本
  102.                 targets: { // 指定兼容到什么版本的浏览器
  103.                   chrome: '60',
  104.                   firefox: '50',
  105.                   ie: '9',
  106.                   safari: '10',
  107.                   edge: '17'
  108.                 },
  109.               }
  110.             ]
  111.           ],
  112.         },
  113.       },
  114.       {
  115.         // 图片处理
  116.         test: /\.(jpg|png|gif)/,
  117.         loader: 'url-loader',
  118.         options: {
  119.           limit: 8 * 1024,
  120.           name: '[hash:10].[ext]',
  121.           outputPath: 'imgs',
  122.           esModule: false, // 关闭url-loader默认使用的es6模块化解析
  123.         },
  124.       },
  125.       {
  126.         test: /\.html$/,
  127.         loader: 'html-withimg-loader',
  128.         // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
  129.         // url-loader esModule:false 保证用commonjs解析
  130.       },
  131.       // 处理其他文件
  132.       {
  133.         exclude: /\.(js|css|less|html|jpg|png|gif)/,
  134.         loader: 'file-loader',
  135.         options: {
  136.           outputPath: 'media',
  137.         },
  138.       },
  139.     ]
  140.   },
  141.   plugins: [
  142.     new MiniCssExtractPlugin({ // 抽取单独的 css 
  143.       filename: 'css/built.css'
  144.     }),
  145.     // 压缩css
  146.     new OptimizeCssAssetsWebpackPlugin(),
  147.     new HtmlWebpackPlugin({
  148.       template: './src/index.html',
  149.       // 根据template指定的html文件，将打包后的js引入
  150.       // 压缩html代码
  151.       minify: {
  152.         // 移除空格
  153.         collapseWhitespace: true,
  154.         // 移除注释
  155.         removeComments: true,
  156.       },
  157.     })
  158.   ],
  159.   mode: 'production'
  160. }

样式文件单独抽取

css-loader 加载样式文件并以字符串的形式存储在js里，开发环境中使用 style-loader ，将js中的样式变成 style 标签插入页面，此种方式会导致：

  1. js 文件体积过大
  2. 先加载js，再创建style标签，渲染速度慢

生产环境使用 mini-css-extract-plugin 插件将css单独抽取成一个文件通过 link 方式引入页面，
使用时：

  1. 安装，引入插件 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  2. plugin 配置插件初始化
  3. MiniCssExtractPlugin.loader 取代 style-loader

    css 兼容性处理

    postcss-loader 用来进行 css 兼容性处理，需要安装 postcss-loader 和 postcss-preset-env ,css 兼容性和浏览器的版本有关，postcss 需要通过 package.json 里面的 browserslist 来指定兼容的浏览器版本
    1. // package.json
    2. {
    3. "browserslist": {
    4.  // 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development
    5.  "development": [ // 开发环境，不需要兼容太多
    6.    "last 1 chrome version",
    7.    "last 1 firefox version",
    8.    "last 1 safari version"
    9.  ],
    10.  "production": [ // 生产环境，需要兼容大部分常见浏览器
    11.    ">0.2%",
    12.    "not dead",
    13.    "not op_mini all"
    14.  ]
    15. },
    16. }
    postcss-loader 可以和 css-loader , MiniCssExtractPlugin.loader 一起作为处理 css 的组合
    1. const commonCssLoader = [
    2. // 这个loader取代style-loader。作用：提取js中的css成单独文件然后通过link加载
    3. MiniCssExtractPlugin.loader,
    4. // css-loader：将css文件整合到js文件中
    5. 'css-loader',
    6. {
    7.  loader: 'postcss-loader',
    8.  options: {
    9.    postcssOptions: {
    10.      plugins: [
    11.        [
    12.          'postcss-preset-env',
    13.          {
    14.            ident: "postcss"
    15.          },
    16.        ],
    17.      ],
    18.    },
    19.  },
    20. },
    21. ]

    html / css / js 文件压缩

    html压缩

    配置 HtmlWebpackPlugin 的 minify

    css 压缩

    初始化 OptimizeCssAssetsWebpackPlugin

    js 压缩

    mode = production 生产环境自动压缩

    js 风格检查

    eslint-loader 对 js 进行风格检查，注意忽略 node_modules 文件夹，而且在加载 js 的时候是最先执行的 enforce: pre

    js 兼容性处理

    babel-loader 需要配置 @babel/preset-env 转换基本语法，剩下的高级语法需要配置 @babel/polyfill