inspired by @vue/cli-service

0.介绍

这个包封装了 webpack 配置，这样业务代码就可以和构建工具隔离，方便单独升级构建工具。

1.安装

$ npm i -D @tua-mp/service

$ yarn add -D @tua-mp/service

2.基本使用

安装之后，会在你的项目中的 node_modules/.bin/ 下安装脚本 tua-mp-service，所以你可以使用 npm scripts 或直接在命令行中调用 ./node_modules/.bin/tua-mp-service。

例如在 package.json 中添加以下内容：

• serve 即 webpack --mode=development -w
• build 即 webpack --mode=production

{
    "scripts": {
        "start": "tua-mp-service serve",
        "build": "tua-mp-service build"
    }
}

然后就可以这样调用：

# 开发
npm start
# OR
yarn start

# 打包
npm run build
# OR
yarn build

3.进阶使用

除了基础的使用方法，还可以在项目中新建文件 tua-mp.config.js 进行一些自定义配置。

3.1.简单配置

最简单的配置方式就是在 tua-mp.config.js 中添加一个对象形式的 configureWebpack 选项。

// tua-mp.config.js
module.exports = {
    configureWebpack: {
        plugins: [
            new MyAwesomeWebpackPlugin()
        ],
    },
}

这部分的配置最终会通过 webpack-merge 和已有的 webpack 配置合并。

3.2.延迟配置

假如你想根据当前的环境变量来动态地配置，那么可以传入一个函数，这个函数会将最终配置传入，这样你就可以直接修改配置，或者返回一个对象合并（同上）。

// tua-mp.config.js
module.exports = {
    configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // mutate config for production...
        } else {
            // mutate for development...
        }
    },
}

3.3.链式配置(进阶用法)

首先在 tua-mp.config.js 中添加一个函数形式的 chainWebpack 选项。

这个函数会传入一个 webpack-chain 对象，这样你就可以更加细粒度地对内部配置进行任意自定义修改。

// tua-mp.config.js
module.exports = {
    chainWebpack: (config) => {
        config.module
            .rule('vue')
            .use('vue-loader')
                .loader('vue-loader')
                .tap((options) => {
                    // modify the options...
                    return options
                })
    },
}