webpack当中的oneOf用法以及tree-shaking

A.oneOf

1.oneOf的作用就是当rules在处理一个文件的时候，只需要用他对应的那一个处理规则进行处理，而不是让所有rules都对一个文件进行处理

2.注意：不能有两个配置处理同一种类型文件。例如对js文件进行处理的时候，如果在rules当中有两个文件同时对js文件进行处理，那么在rules当中就不能同时存在这两个rules，必须要将一个文件提出来放在oneOf的前面，这样子就可以避免冲突。

3.示例代码:

  module: {
    rules: [
      {
        // 在package.json中eslintConfig --> airbnb
        test: /\.js$/,
        exclude: /node_modules/,
        // 优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
      {
        // 以下loader只会匹配一个
        // 注意：不能有两个配置处理同一种类型文件
        oneOf: [
          {
            test: /\.css$/,
            use: [...commonCssLoader]
          },
          {
            test: /\.less$/,
            use: [...commonCssLoader, 'less-loader']
          },
          /*
            正常来讲，一个文件只能被一个loader处理。
            当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
              先执行eslint 在执行babel
          */
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'usage',
                    corejs: {version: 3},
                    targets: {
                      chrome: '60',
                      firefox: '50'
                    }
                  }
                ]
              ]
            }
          },
          {
            test: /\.(jpg|png|gif)/,
            loader: 'url-loader',
            options: {
              limit: 8 * 1024,
              name: '[hash:10].[ext]',
              outputPath: 'imgs',
              esModule: false
            }
          },
          {
            test: /\.html$/,
            loader: 'html-loader'
          },
          {
            exclude: /\.(js|css|less|html|jpg|png|gif)/,
            loader: 'file-loader',
            options: {
              outputPath: 'media'
            }
          }
        ]
      }
    ]
  }

B.tree-shaking

作用:去除无用代码

tree shaking：去除无用代码

    前提：1. 必须使用ES6模块化  2. 开启production环境

    作用: 减少代码体积

在package.json中配置

      "sideEffects": false 所有代码都没有副作用（都可以进行tree shaking）

        问题：可能会把css / @babel/polyfill （副作用）文件干掉

      "sideEffects": ["*.css", "*.less"]

// 定义nodejs环境变量：决定使用browserslist的哪个环境

        process.env.NODE_ENV = 'production';

webpack.config.js代码:

在当中加入：

process.env.NODE_ENV = 'production';

//定义nodejs环境变量：决定使用browserslist的哪个环境

 package.json:

"sideEffects": false   //所有代码都没有副作用（都可以进行tree shaking）
或者：
"sideEffects": ["*.css", "*.less"]   //可能会把css / @babel/polyfill （副作用）文件干掉