生产环境-production

开发环境里面的css打包文件和js在一个文件里面，会导致js文件太大，需要下一个插件，plugin mini-css-extract-plugin抽取css文件出来，loader能做的事情比较少，兼容性处理一般用loader，压缩用plugin，

optimize-css-assets-webpack-plugin是一个用来压缩css的插件

抽取css文件：

use: [
          // 创建style标签，将样式放入
          // 'style-loader', 
          // 这个loader取代style-loader。作用：提取js中的css成单独文件
          MiniCssExtractPlugin.loader,
          // 将css文件整合到js文件中
          'css-loader'
        ]
new MiniCssExtractPlugin({
      // 对输出的css文件进行重命名
      filename: 'css/built.css'
    })

css兼容性处理：

  css兼容性处理：postcss --> postcss-loader（保证能在webpack中使用） postcss-preset-env，（保证postcss识别到某一个环境，加载指定的配置，精确到某一个浏览器的版本，

  帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式

）

 

// 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development，不设置默认使用生产环境的配置，
            
"browserslist": {//各种浏览器的配置
    "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',
          // 修改loader的配置（可以直接像上面那样写，写成一个对象是为了可以修改loader配置）
          {
            loader: 'postcss-loader',
            options: {//用来修改默认配置
              ident: 'postcss',
              plugins: () => [
                // postcss的插件
                require('postcss-preset-env')()
              ]
            }
          }

js语法检查：

团队工作的时候写的代码风格一致

 

/*
        语法检查： eslint-loader  eslint//要用到的依赖
          注意：只检查自己写的源代码，第三方的库是不用检查的
          设置检查规则：
            package.json中eslintConfig中设置~
              "eslintConfig": {
                "extends": "airbnb-base"
              }
            airbnb --> eslint-config-airbnb-base  eslint-plugin-import eslint为了能使用airbnb规则安装的依赖
      */
      {
        test: /\.js$/,//检查的文件只有js文件
        exclude: /node_modules/,//排除node_modules
        loader: 'eslint-loader',
        options: {
          // 自动修复eslint的错误
          fix: true
        }
      }

js兼容性处理：

IE浏览器不认识es6新增语法

 /*
将es6以上的语法转换成es5
        js兼容性处理：babel-loader @babel/core //要下载的包
          1. 基本js兼容性处理 --> @babel/preset-env
            问题：只能转换基本语法，如promise高级语法不能转换
          2. 全部js兼容性处理 --> @babel/polyfill  //下载以后直接引入就可以使用，在js文件中import引入// import '@babel/polyfill';
            问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~
          3. 需要做兼容性处理的就做：按需加载  --> core-js//下载配置
      */  
      {
        test: /\.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'
                }
              }
            ]
          ]
        }
      }

js和html压缩：js压缩，只需要将mode的值改成production，就能实现自动压缩，生产环境下会自动压缩代码，因为他会自动加载一个插件UglifyJsPlugin

html压缩：（js和css都做了兼容性处理，html不需要）
new HtmlWebpackPlugin({
      template: './src/index.html',
      // 压缩html代码
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true
      }
    })