vue cli webpack-chain 使用

原文链接: vue cli webpack-chain 使用

上一篇: vue cli3 配置 worker-loader 使用worker

下一篇: vue v-cloak 效果演示

https://github.com/neutrinojs/webpack-chain/tree/v5

熟悉 cli-plugin-babel 、 cli-plugin-eslint 源码的话，你会时常看到它。

如何使用呢？

1、加载它

const Config = require('webpack-chain');

2、调用 new

const config = new Config();

后面就是一个一个的方法介绍和使用了：

第一个： entry 设置

config
.entry('index11')
        .add('src/index11.js')
        .end()
      .entry('index22')
        .add('src/index22.js')
        .end()

我们调用如下方法看看：

config.toString()

打印一下：

{
  entry: {
    index11: [
      'src/index11.js'
    ],
    index22: [
      'src/index22.js'
    ]
  }
}

第二个： plugin 设置

参考： cli-service/lib/config/app.js

格式如下：

config
  .plugin(name)
  .use(WebpackPlugin, args)

const HTMLPlugin = require('html-webpack-plugin')

const htmlOptions = {
  templateParameters: (compilation, assets, pluginOptions) => {},
  template: '/Users/***/public/index.html'
}


webpackConfig
        .plugin('html')
          .use(HTMLPlugin, [htmlOptions])

我们调用如下方法看看：

config.toString()

打印一下：

plugins: [
  /* config.plugin('html') */
  new HtmlWebpackPlugin(
      {
        templateParameters: function () { /* omitted long function */ },
        template: '/Users/***/public/index.html'
      }
    )
]

第三个： module 设置

这里方法比较多，用到了

• rule 对应 rules: []
• test(/.js /
• include.add('src') 对应 include: ['src']
• use('eslint') 对应 use: []
• loader('eslint-loader') 对应 loader: 'eslint-loader'

测试地址： https://runkit.com/embed/5tizmdtfci3t

config.module
  .rule('lint')
    .test(/\.js$/)
    .pre()
    .include
      .add('src')
      .end()
    // Even create named uses (loaders)
    .use('eslint')
      .loader('eslint-loader')
      .options({
        rules: {
          semi: 'off'
        }
      });

我们调用如下方法看看：

config.toString()

打印一下：

{
  module: {
    rules: [
      /* config.module.rule('lint') */
      {
        test: /\.js$/,
        enforce: 'pre',
        include: [
          'src'
        ],
        use: [
          /* config.module.rule('lint').use('eslint') */
          {
            loader: 'eslint-loader',
            options: {
              rules: {
                semi: 'off'
              }
            }
          }
        ]
      }
    ]
  }
}

第四个： devServer 设置

config.devServer.set('hot', true);
config.devServer.hot(true)

我们调用如下方法看看：

config.toString()

打印一下：

{
  devServer: {
    hot: true
  }
}

设置目录别名

可以直接使用目录引入

    import str from '@/components/str'
    import str1 from 'components/str'

修改后需要重新启动项目

vue.config.js

const path = require('path');

function resolve(dir) {
    return path.join(__dirname, dir)
}

module.exports = {
    lintOnSave: true,
    chainWebpack: (config) => {
        config.resolve.alias
            .set('@', resolve('src'))
            .set('assets', resolve('src/assets'))
            .set('components', resolve('src/components'))
            .set('layout', resolve('src/layout'))
            .set('base', resolve('src/base'))
            .set('static', resolve('src/static'))
    }
}

配置cache-loader

config
    .use('cache-loader')
    .loader('cache-loader')
    .options({
      cacheDirectory,
      cacheIdentifier
    })
    .end()
    .use('babel-loader')
      .loader('babel-loader')
      .options({
        // do not pick local project babel config
        babelrc: false,
        presets: [
          require.resolve('@vue/babel-preset-app')
        ]
      })

第八行结尾 end() 处返回的便又是 config 了