webpack打包项目，性能提升

        hello，大家好啊！我是聪明的墨菲特 (o.O)? ！今天和大家分享在使用webpack打包项目时，通过处理打包文件来提升性能，达到节省时间的目的。

(注意：以下两种配置方式在“开发环境”和“生产环境”都适用 (0.o) )

1.oneOf

处理样式文件

工作原理是：对样式文件（如：css、less、sass、styl）打包时，对loader选择进行处理，每个文件只能被其中一个loader配置处理，其他的没选中的loader不执行，从而提高打包性能。（小项目效果不明显，项目越大节省时间越明显）

配置代码如下：

  //加载器
  module: {
    rules: [
      //loader的配置
      {
        oneOf:[
          {
            test: /\.css$/i,
            use: [
              //执行顺序：从下到上，从右到左
              "style-loader", //将js中css通过创建style标签添加html文件中生效
              "css-loader", //将css资源编译成common.js的模块到js中
            ],
          },
    
          {
            test: /\.less$/i,
            use: ["style-loader", "css-loader", "less-loader"],
          },
    
          {
            test: /\.s[ac]ss$/i,
            use: [
              // 将 JS 字符串生成为 style 节点
              "style-loader",
              // 将 CSS 转化成 CommonJS 模块
              "css-loader",
              // 将 Sass 编译成 CSS
              "sass-loader",
            ],
          },
    
          {
            test: /\.styl$/i,
            use: ["style-loader", "css-loader", "stylus-loader"],
          },
        ]
      }
    ],
  },

2.exclude和include

exclude和include都是为了不处理node_modules中的js文件，提高性能。(exclude和include选择一种配置就好)

处理js文件如下：

    module: {
      rules: [
              {
                test: /\.js$/,

                //排除node_modules中的js文件（这些文件不做处理）
                // exclude: /node_modules/, 

                //只处理src下的文件，其他文件不处理
                include:path.resolve(__dirname,"../src"),

                loader: "babel-loader",
                options: {
                  presets: ["@babel/preset-env"], //智能预设，能够编译es6的语法
                },
          },
      ]
    }

es部分的配置如下：

  //插件
  plugins: [
    new ESLintPlugin({
      context: path.resolve(__dirname, "../src"), //检测那些文件
      exclude: "node_modules", //默认值
    }),
  ],