andy-tua-mp

0.1.28 • Public • Published

@tua-mp/service

inspired by @vue/cli-service

Standard - JavaScript Style

Build Status Coverage Status Version License

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 中添加以下内容:

  • servewebpack --mode=development -w
  • buildwebpack --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
                })
    },
}

Package Sidebar

Install

npm i andy-tua-mp

Weekly Downloads

0

Version

0.1.28

License

MIT

Unpacked Size

32.9 kB

Total Files

23

Last publish

Collaborators

  • lingbaichao