前置
如果你曾使用 webpack 构建应用,就会知道如果把所有配置都写在webpack.config.js
中那将是灾难. 正如你所见, 我现在使用的这套博客园皮肤是使用 gulp 构建的, 如果你不熟悉 gulp, 那你肯定熟悉 webpack. 下面将介绍我使用这两个工具是如何抽离配置的, 先从 webpack 开始.
webpack
原因
webpack 默认的webpack.config.js
长这样:
module.exports = {
entry: {},
output: {},
module: {}
// ...
}
这里最让人头疼的就是module
内的层层嵌套. 例如,我稍稍处理 css 和 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 提供了一个函数,该函数将数组串联并合并创建新对象的对象。如果遇到函数,它将执行它们,通过算法运行结果,然后再次将返回的值包装在函数中。
语法
// 默认的方式
const output = merge(object1, object2, object3, ...);
// 数组对象
// 这适用于所有可用的功能。
const output = merge([object1, object2, object3]);
// 右边优先
const output = merge(
{ fruit: "apple", color: "red" },
{ fruit: "strawberries" }
);
一般使用默认的方式就够了, 深入了解Webpack-merge.接下来不在使用webpack.config.js
,在项目根目录新建 config 文件夹.文件夹下新建:
- webpack.base.js 公共的配置
- webpack.dev.js 开发环境配置
- webpack.prod.js 生产环境配置
webpack.base.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
:
"scripts": {
"start": "webpack-dev-server --config config/webpack.dev.js",
"build": "webpack --config config/webpack.prod.js"
},
- npm start 在本地启动
- npm run build 打包项目
另外,如果你有兴趣, 这里有一个使用webpack构建的 DEMO 供你参考:
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
中定义.