前端构建工具: 配置抽离

# 前置 如果你曾使用 webpack 构建应用,就会知道如果把所有配置都写在`webpack.config.js`中那将是灾难. 正如你所见, 我现在使用的这套博客园皮肤是使用 gulp 构建的, 如果你不熟悉 gulp, 那你肯定熟悉 webpack. 下面将介绍我使用这两个工具是如何抽离配置的, 先从 webpack 开始. # webpack ## 原因 webpack 默认的`webpack.config.js`长这样: ```js module.exports = { entry: {}, output: {}, module: {} // ... } ``` 这里最让人头疼的就是`module`内的层层嵌套. 例如,我稍稍处理 css 和 js 就会像下面这样: ```js module: { rules: [ { test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1, }, }, 'postcss-loader', ], }, { test: /\.js$/, exclude: /node_modules/, use: [ { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], }, }, { loader: 'eslint-loader', options: { cache: true, }, }, ], }, ], }, ``` 如果再去区分生产环境和开发环境可能看起来更加混乱. 好一点的做法是, 抽离不同环境的 module 或者其他配置,根据环境来决定最终导出的项.但是无法改变的是这些东西都存在一个`webpack.config.js`文件中. 如果应用程序需要使用大量的 loader,会显得文件又长又混乱, 需要修改一些配置时容易出错. 寻找和出错都会浪费时间. ## webpack-merge `npm i -D webpack-merge` Webpack-merge 提供了一个函数，该函数将数组串联并合并创建新对象的对象。如果遇到函数，它将执行它们，通过算法运行结果，然后再次将返回的值包装在函数中。 语法 ```js // 默认的方式 const output = merge(object1, object2, object3, ...); // 数组对象 // 这适用于所有可用的功能。 const output = merge([object1, object2, object3]); // 右边优先 const output = merge( { fruit: "apple", color: "red" }, { fruit: "strawberries" } ); ``` 一般使用默认的方式就够了, 深入了解[Webpack-merge](https://www.npmjs.com/package/webpack-merge).接下来不在使用`webpack.config.js`,在项目根目录新建 config 文件夹.文件夹下新建: - webpack.base.js 公共的配置 - webpack.dev.js 开发环境配置 - webpack.prod.js 生产环境配置 **webpack.base.js** ```js const path = require("path") module.exports = { entry: { // 这里是多入口 index: "./src/main.js", reacg: "./src/themes/reacg/index.js" //... }, output: { filename: "[name].min.js", path: path.join(__dirname, "..", "dist") }, resolve: { alias: { "@": path.resolve("src") } } } ``` 这里需要注意的一点是 `output.path` 需要处理一下路径.`path.join(__dirname, "..", "dist")`,这样就能够和原来一样将打包得到的 dist 目录输出到根目录. 这句代码的意思是获取当前绝对路径的上一层路径,就是项目的根目录了. 另外的`webpack.dev.js`和`webpack.prod.js`根据项目需要分别配置就可以了.这样如果再去添加或修改一些配置就能一目了然了.最后还需要更改一下`package.json`中的`script`: ```json "scripts": { "start": "webpack-dev-server --config config/webpack.dev.js", "build": "webpack --config config/webpack.prod.js" }, ``` - npm start 在本地启动 - npm run build 打包项目 另外,如果你有兴趣, 这里有一个使用webpack构建的 **DEMO** 供你参考: [](https://gitee.com/guangzan/awescnb2.0) # gulp 如果你使用 gulp 构建应用,抽离它的配置就相当简单了.正常情况下,根目录下有一个`gulpfile.js`文件,在这里做一些配置.最后通过`exports`导出配置,通过 `gulp` 命令或者自定义命令来运行 task(任务).要将不同环境的配置分开写只需要将`gulpfile.js`文件换成同名的文件夹并新建: - index.js 必须, 被当作 gulpfile.js 使用 - options.js 一些常量 - gulp.dev.js 开发环境配置 - gulp.prod.js 生产环境配置 除了必须的index之外可以随意扩展.如果需要使用npm来代替gulp命令,只需要在`package.json`中的`script`中定义. 如果你有兴趣, 这里同样有一个使用gulp构建的 **DEMO** 供你参考: [](https://gitee.com/guangzan/awescnb)