webpack-chain的使用

webpack-chain的使用

简述

• 通过链式的方式修改webpack的配置

使用

entry 和 output

module.exports = {
	chainWebpack: config => {
		config.entryPoints.clear() // 把默认的入口清空
		config.entry('entry1').add('./src/index1.tsx') // 新增入口
		config.entry('entry2').add('./src/index2.tsx') // 新增文件
		config.output
			.path("dist")
			.filename("[name].[chunkhash].js")
			.chunkFilename("chunks/[name].[chunkhash].js")
			.libraryTarget("umd")
	}
}

alias

• 对于路径别名的配置，配置如下：

module.exports = {
	chainWebpack: config => {
		config.resolve.alias
	    .set('assets',resolve('src/assets'))
	    .set('components',resolve('src/components'))
	    .set('static',resolve('src/static'))
	    .delete('static') // 删掉指定的别名
	}
}

loader

1、添加一个loader

module.exports = {
	chainWebpack: config => {
		config.module
		.rule(name)
		.use(name)
		.loader(loader)
		.option(option)
	}
}

示例

module.exports = {
	chainWebpack: config => {
		config.module
		.rules('ts')
		.test(/\.tsx?/)
		.use('ts-loader')
		.loader('ts-loader')
		.option({
			transpileOnly: true
		})
		.end()
	}
}

2、修改loader参数

• 可通过tap方法修改loader的参数：

module.exports = {
	chainWebpack: config => {
		config.module
		.rule('ts')
		.test(/\.tsx?/)
		.use('ts-loader')
		.loader('ts-loader')
		.tap(option => {
			// do some ...
			return option
		})
		.end()
	}
}

在所有的配置完成之后，可以通过调用config.toConfig()来拿到最后的配置对象，可以直接作为webpack的配置。

3、移除一个loader

• 通过uses对象的delete方法，根据loader的name删除

module.exports = {
	chainwebpack: config => {
		config.module
		.rule('ts')
		.test(/\.tsx?/)
		.uses.delete('ts-loader')
	}
}

plaugin

1、添加一个插件

• 先指定名字（这个名字是自定义的），然后通过 use 添加插件
• use的第一个参数是插件名称，第二个参数是插件参数，这个参数必须是一个数组，也可以不传。

// vue.config.js

module.exports = {
	chainWebpack: config => {
		config
			.plugin(name)
			.use(WebpackPlugin, args)
	}
}

示例

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
	chainWebpack: config => {
		config
		.plugin('extract')
		.use(ExtractTextPlugin, [{
			filename: 'build.min.css',
			allChunks: true,
		}])
	}
}

2、移除插件

• 添加插件时我们自定义了一个插件name，移除插件就是通过这个name来进行实现的

module.exports = {
	chainWebpack: config => {
		config.plugins.delete('extract')
	}
}

3、指定插件在xx插件之前/之后凋用

例如，现在需要指定 html-webpack-plugin 这个插件在刚刚写的 extract 插件之前执行，则写法如下：

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

module.exports = {
	chainWebpack: config => {
		config
		.plugin('html')
		.use(htmlWebpackPlugin)
		.before('extract')
	}
}

通过 before 方法，传入另一个插件的 name 即可，表示在另一个插件之前执行。

同样，如果需要在 extract 插件之后执行，调用 after 方法

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

module.exports = {
	chainWebpack: config => {
		config
		.plugin('html')
		.use(htmlWebpackPlugin)
		.after('extract')
	}
}

4、动态修改插件参数

• 我们可以用 webpack-chain 来动态修改插件的传参，举例如下：
• 使用tap方法修改参数

module.exports = {
	chainWebpack: config => {
		config
		.plugin(name)
		.use(webpackPluginName)
		.tap(args => newArgs)
	}
}

5、修改插件初始化过程

• 我们可以自定义插件的实例化的过程，比如下面这样
• 通过init方法，返回一个实例，这将代替原有的实例化过程

module.exports = {
	chainWebpack: config => {
		config
		.plugin(name)
		.init((Plugin, args) => new Plugin(...args));
	}
}