【Webpack性能优化系列（三）【k4】oneOf】

总结：多次处理一个文件时，必须先指定执行顺序，然后才能参考。

Webpack系列文章：

【Webpack性能优化系列（二）】【k4】源码【k4】图】【Webpack性能优化系列（一）【k4】HMR热门模块【替换】 【配置Webpack生产环境】约2万字长文总结学习如何提取并压缩CSS成多带文件、css及兼容处理、如何压缩html和js、js如何检查语法eslint和js兼容处理babel！ ！ ！ 【搭建Webpack开发环境】我们整理了一篇万字长的文章，介绍如何打包样式资源、html资源、图片资源等。 什么是 devServer，如何配置它？ [Webpack 简介和 5 个核心概念] oneOf

创建 loader 时，有很多 loader 规则，但每个 oneOf 都可以唯一使用，因为一个文件只能匹配和处理由一台装载机。 加载器运行效率更高，因为它们不必查询每个文件的所有加载器。

Webpack.config.js 的编写和配置如下：

const {solve } = require ("path");const MiniCssExtractPlugin = require("mini- css-extract -插件");const OptimizeCssAssetsWebpackPlugin = require("优化-css-assets-]webpack-plugin");const HtmlWebpackPlugin = require("html-webpack-plugin"); // 定义nodejs环境变量：确定使用浏览器列表中的哪个环境 process.env.NODE_ENV = " Production"; // 复用loaderconst commonCssLoader = [ MiniCssExtractPlugin.loader, "css-loader", { // 还需要在package.json中定义browserslist loader: "postcss[k4 ]loader", options: { ident: "postcss ", 插件: () => [require("postcss-preset-env")()] } }];module.exports = { 条目: " ./src/js/index.js" , 输出: { 文件名: "js/built.js", 路径:solve(__dirname, "build") }, 模块: { 规则: [ { // package.json eslintConfig [ k4]-> 爱彼迎测试: / / .js$/, except: /node_modules/, // 优先执行force: "pre", // 通常一个文件只能被一个加载器处理，但是如果一个文件被多个加载器处理， // 指定的加载器执行顺序必须先执行。运行 eslint，然后 babel loader: "eslint-loader", options: { fix: true } }, { // 以下 loader 只匹配一个 // 注意：同一类型 不能有两个配置处理文件因此，eslint -Loader 被放置在 oneOf 匹配之前，oneOf: [ { test: //.css$/, use: [...commonCssLoader] }, { test: //.less$/, use: [ 。 ..commonCssLoader , "less-loader"] }, /* 通常，一个文件只能由一个加载器处理。 如果一个文件由多个加载程序处理，则必须指定加载程序的执行顺序。 首先运行 eslint，然后运行 ​​babel */ { test: //.js$/, except: /node_modules/, loader: " babel[k4 ]loader", options: { preset: [ [ "@babel/preset -env ”，{useBuiltIns: "usage", corejs: {version: 3}, target: { chrome: "60", firefox: "50" } ] ] } }, { test: //.(jpg|png|gif)/, 加载程序: "url-loader", 选项: {limit: 8 * 1024, name: "[hash:10].[ext]", outputPath: "imgs", esModule: false } }, { test: // . html$/, 加载器: "html-loader" }, { 排除: //.(js|css|less|html|jpg|png|gif)/, 加载器: "file-loader", 选项: { 输出路径：“媒体” } }] } ] }, 插件: [ new MiniCssExtractPlugin({ filename: "css/built.css" }), new OptimizeCssAssetsWebpackPlugin(), new HtmlWebpackPlugin({ template: "./src/index.html", minify: {collapseWhitespace : true, removeComments: true } }) ], mode: "生产"}; https://www.bilibili.com/video/BV1e7411j7T5?p=6&spm_id_from=pageDriver https://www.cnblogs.com/cl1998/p/ 参见13210438.htmlhttps://webpack.docschina.org/configuration/module/。 #ruleoneof