oneOf的作用
提升构建速度,避免每个文件都被所有loader过一遍,
因为任何一个文件,构建过程中,在遇到第一个与之对应的loader后,不会再往下进行。
在webpack.config.js 中配置 oneOf
1.文件结构
2.代码
webpack.config.js
const {resolve} = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') //提取 js 中的 css 成单独文件 const MiniCssExtractPlugin = require('mini-css-extract-plugin') //压缩css const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin') // 定义nodejs环境变量:决定使用browserslist的哪个环境 process.env.NODE_ENV = 'production'; //复用 loader const commonCssLoader = [ // 这个 loader 取代 style-loader。作用:提取js中的css成单独文件 //MiniCssExtractPlugin.loader 加载不了 less文件中的图片,记录一下坑,使用"style-loader"可以加载。。。 MiniCssExtractPlugin.loader, //如果只使用loader的默认配置,就直接写字符串,会默认加载。 'css-loader', // css兼容性处理 //如果要修改配置,就使用对象的形式 { // 还需要在package.json中定义browserslist loader: "postcss-loader", options: { ident: "postcss", plugins: () => [ // postcss的插件 require('postcss-preset-env')() ] } } ] module.exports = { entry: './src/js/index.js', output: { filename: "js/built.js", path: resolve(__dirname, "build") }, module: { rules: [ /* 但是,实际开发过程中,同样会有一个文件需要匹配多个loader的场景, 比如js文件同时需要eslint-loader和babel-loader,这样的话就不能将两个loader都放到oneOf里面, 因为一旦匹配了第一个loader就不会再继续执行第二个loader,解决办法也很简单,只需要放到oneOf外面即可。 */ // js语法检查(eslint) { // 在package.json中eslintConfig --> airbnb test: /\.js$/, exclude: /node_modules/, //当一个文件要被多个loader处理,添加 enforce: "pre",会被优先执行 enforce: "pre", loader: "eslint-loader", options: { //自动修复eslint的错误 fix: true, } }, { /* 在webpack对文件打包或者构建的时候,都会将rules里所有的规则都过一遍,这样会影响构建性能, 因为单个文件只会匹配rules里的单条规则,匹配上了就没必要继续匹配,所以这里就用到了oneOf来处理这个问题。 oneOf的作用 提升构建速度,避免每个文件都被所有loader过一遍, 因为任何一个文件,构建过程中,在遇到第一个与之对应的loader后,不会再往下进行。 */ oneOf: [ { test: /\.css$/, use: [...commonCssLoader] }, { test: /\.less$/, use: [...commonCssLoader, 'less-loader'] }, /* 正常来讲,一个文件只能被一个loader处理。 当一个文件要被多个loader处理,那么一定要指定loader执行的先后顺序: 先执行eslint 再执行babel */ //js兼容性处理 { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", options: { presets: [ [ //@babel/preset-env: 基本js兼容性处理 '@babel/preset-env', { //按需处理 //按需加载 useBuiltIns: 'usage', //指定 core-js 版本 corejs: { version: 3 }, //指定兼容性做到哪个版本 targets: { chrome: '60', firefox: '60', ie: '9', safari: '10', edge: '17' } } ] ] } }, // 打包图片资源 { test: /\.(jpg|png|gif)$/, loader: 'url-loader', options: { limit: 8 * 1024, name: '[hash:10].[ext]', outputPath: 'imgs', esModule: false } }, // 打包html资源 { test: /\.html$/, loader: 'html-loader' }, // 打包其它资源 { exclude: /\.(js|css|less|html|png|jpg|gif)$/, loader: "file-loader", options: { outputPath: "media" } } ] } ] }, plugins: [ //提取 js 中的 css 成单独文件 new MiniCssExtractPlugin({ //对输出文件名进行重命名 filename: 'css/built.css' }), //压缩 css new OptimizeCssAssetsWebpackPlugin(), new HtmlWebpackPlugin({ template: "./src/index.html", //压缩 html 代码 minify: { // 移除空格 collapseWhitespace: true, // 移除注释 removeComments: true } }) ], mode: 'production' }
end~