上面可以看出我们新建了一个webpack.parts.js文件，这个文件中主要是存放我们的一些配置零件。如何写出可配置，可拔插的配置零件。就是我们这个文件的最重要的部分。
以loadCSS为例：
exports.loadCSS = ({reg = /\.css$/,include,exclude,uses = []} = {}) => ({ module : { rules:[{ test : reg, include, exclude, use[{ loader : "style-loader", },{ loader : "css-loader", }].concat(uses), }] } })
上面代码中，利用exports导出单个配置零件，通过解构赋值来传入参数。使用数组的concat来连接外部导入的loader。参数解析：
reg:表示loader匹配的test正则，默认为css，这里可以是（less、sass、stylus）。
include:表示所要打包的文件夹。
exclude：表示要跳过打包的文件夹。
uses：外部导入的loader。
在webpack.development.js中引入
module.exports = merge([ config, parts.loadCSS({ reg : /\.less/, use : ["less-loader"] }), parts.loadCSS(), ])
分离配置文件的好处
配置文件拆分可以是我们继续扩展配置。最重要的收益是我们可以提取不同目标之间的共性。并且还可以识别要组合的较小配置部件，这些配置不见可以推送到自己的软件包以跨项目使用。还可以将配置作为依赖项进行管理，而不是在多个项目中复制类似的配置。
我自己的parts配置
展示一部分我自己的部件配置，由于在学习阶段，不足的地方还望大佬们提出，学习进步。
/** * @name 本地服务器配置 * @param host 打开的url * @param port 打开url的端口号 * */ exports.devServer = ({ host, port} = {}) => ({ devServer : { stats : "errors-only", host, port, open : true, overlay : true, } }) /** * @name 未从js中分离的cssLoader配置 * @param reg 匹配文件的后缀名test * @param include 所要打包的文件夹 * @param exclude 跳过打包的文件夹 * @param uses 所要向loadCSS中添加的loader */ exports.loadCSS = ({reg = /\.css$/,include,exclude,uses = []} = {}) => { return { module: { rules: [{ test: reg, use: [{ loader: "style-loader" }, { loader: "css-loader" }].concat(uses), include, exclude, }] }, } } /** * @name 从js中分离的cssLoader配置 * @param reg 匹配文件的后缀名test * @param include 所要打包的文件夹 * @param exclude 跳过打包的文件夹 * @param uses 所要向loadCSS中添加的loader * */ const MiniCssExtrectPlugin = require("mini-css-extract-plugin"); exports.extractCSS = ({reg = /\.css$/,include,exclude,uses = []} = {}) => { const plugin = new MiniCssExtrectPlugin({ filename : "styles/[name]-[hash:5].css", }) return { module: { rules: [{ test: reg, use: [{ loader: MiniCssExtrectPlugin.loader, options : { publicPath : "../" } }, { loader: "css-loader" }].concat(uses), include, exclude, }] }, plugins : [ plugin, ] } } /** * @name css tree-shaking：将没有用到的css扔掉 * @param paths 监听css tree-shaking 的文件名 */ const PurifyCssPlugin = require("purifycss-webpack"); exports.purifyCSS = ({paths}) => ({ plugins : [ new PurifyCssPlugin({paths}) ] }) /** * @name autoprefixer 为css样式添加浏览器前缀 * @author wangchong */ exports.autoprefix =() =>({ loader : "postcss-loader", options : { plugins : () => [require("autoprefixer")] } }) /** * @name loadImage ：打包图片资源 * @param include 所要打包的文件夹 * @param exclude 跳过打包的文件夹 * @param options loader的options配置 */ exports.loadImage = ({include,exclude,options} = {}) => ({ module : { rules : [ { test : /\.(png|jpg)$/, include, exclude, use : { loader : "url-loader", options, } } ] } })
文章总结自：Surviejs-webpack。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: