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方法,根据loadername删除
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));
	}
}

你可能感兴趣的:(webpack,webpack,前端,node.js)