【Webpack 性能优化系列(3) - oneOf】

阳光下的葵花

webpack系列文章：

• 【Webpack 机能劣化系列(2) - source-map】
  
• 【Webpack 机能劣化系列(1) - HMR 热模块交换】
  
• 【Webpack 消费状况设置】远两万字少文总结进修怎样提与css为零丁文件、css的紧缩战兼容性处置，怎样紧缩html战js、怎样做js语法查抄eslint战js兼容性处置babel！！！
  
• 【Webpack 开辟状况设置】万字少文总结进修怎样挨包款式资本、html资本、图片资本战其他资本？devServer是甚么，怎样设置？
  
• 【Webpack 简介及五个中心观点】
  

oneOf

我们正在写loader的时分，rules里面有十分十分多的loader划定规矩，可是每一个文件只能婚配一个 loader，被一个 loader 处置，因而可使用 oneOf 独一婚配，没有需求每一个文件把一切的 loader 皆讯问一遍，如许能够进步 loader 的施行服从
webpack.config.js写法设置以下:

1. const { resolve } = require('path');
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. // 界说nodejs情况变量：决议利用browserslist的哪一个情况
7. process.env.NODE_ENV = 'production';
9. // 复用loader
10. const commonCssLoader = [
11.   MiniCssExtractPlugin.loader,
12.   'css-loader',
13.   {
14.     // 借需求正在package.json中界说browserslist
15.     loader: 'postcss-loader',
16.     options: {
17.       ident: 'postcss',
18.       plugins: () => [require('postcss-preset-env')()]
19.     }
20.   }
21. ];
23. module.exports = {
24.   entry: './src/js/index.js',
25.   output: {
26.     filename: 'js/built.js',
27.     path: resolve(__dirname, 'build')
28.   },
29.   module: {
30.     rules: [
31.       {
32.         // 正在package.json中eslintConfig --> airbnb
33.         test: /\.js$/,
34.         exclude: /node_modules/,
35.         // 劣先施行
36.         enforce: 'pre',//一般的，一个文件只能被一个loader处置，当一个文件要被多个loader处置，
37.                                    //必然要指定loader施行的前后挨次，先施行eslint再施行babel
38.         loader: 'eslint-loader',
39.         options: {
40.           fix: true
41.         }
42.       },
43.       {
44.         // 以下loader只会婚配一个
45.         // 留意：不克不及有两个设置处置统一品种型文件,以是eslint-loader放正在oneOf婚配之前施行
46.         oneOf: [
47.           {
48.             test: /\.css$/,
49.             use: [...commonCssLoader]
50.           },
51.           {
52.             test: /\.less$/,
53.             use: [...commonCssLoader, 'less-loader']
54.           },
55.           /*
56.             一般来说，一个文件只能被一个loader处置。
57.             当一个文件要被多个loader处置，那末必然要指定loader施行的前后挨次：
58.               先施行eslint 正在施行babel
59.           */
60.           {
61.             test: /\.js$/,
62.             exclude: /node_modules/,
63.             loader: 'babel-loader',
64.             options: {
65.               presets: [
66.                 [
67.                   '@babel/preset-env',
68.                   {
69.                     useBuiltIns: 'usage',
70.                     corejs: {version: 3},
71.                     targets: {
72.                       chrome: '60',
73.                       firefox: '50'
74.                     }
75.                   }
76.                 ]
77.               ]
78.             }
79.           },
80.           {
81.             test: /\.(jpg|png|gif)/,
82.             loader: 'url-loader',
83.             options: {
84.               limit: 8 * 1024,
85.               name: '[hash:10].[ext]',
86.               outputPath: 'imgs',
87.               esModule: false
88.             }
89.           },
90.           {
91.             test: /\.html$/,
92.             loader: 'html-loader'
93.           },
94.           {
95.             exclude: /\.(js|css|less|html|jpg|png|gif)/,
96.             loader: 'file-loader',
97.             options: {
98.               outputPath: 'media'
99.             }
100.           }
101.         ]
102.       }
103.     ]
104.   },
105.   plugins: [
106.     new MiniCssExtractPlugin({
107.       filename: 'css/built.css'
108.     }),
109.     new OptimizeCssAssetsWebpackPlugin(),
110.     new HtmlWebpackPlugin({
111.       template: './src/index.html',
112.       minify: {
113.         collapseWhitespace: true,
114.         removeComments: true
115.       }
116.     })
117.   ],
118.   mode: 'production'
119. };

复造代码

参考

• https://www.bilibili.com/video/BV1e7411j7T5?p=6&spm_id_from=pageDriver
  
• https://www.cnblogs.com/cl1998/p/13210438.html
  
• https://webpack.docschina.org/configuration/module/#ruleoneof
  

免责声明：假如进犯了您的权益，请联络站少，我们会实时删除侵权内乱容，感谢协作！