webpack-merge 配置抽离

前置

若是你曾使用 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 中定义.

若是你有兴趣，这里一样有一个使用 gulp 构建的 DEMO 供你参考: