Vue cli3 chainWepack 使用用法
原创
在项目开发中我们难免碰到需要对webpack配置更改的情况，这就需要对 loader 进行配置。
loader
定义
*l* *o* *a* *d* *e* *r*让webpack能够去处理那些非JavaScript文件（webpack自身只理解JavaScript）。loader可以将所有类型的文件转换为webpack能够处理的有效模块，然后你就可以利用webpack的打包能力，对它们进行处理。
本质上，webpackloader将所有类型的文件，转换为应用程序的依赖图（和最终的bundle）可以直接引用的模块。
**在webpack配置中定义loader时，要定义在module.rules中，而不是rules***。*
在配置文件中webpack.config.js加入module属性，该属性是一个对象,在这个属性中有一个rules字段。
rules是一个数组，所有的loader配置都可以写在这个数组里，每个loader配置是一个对象。
module:{
rules:[{
test:/.js$/,
use:[{
loader:'babel-loader',
options: {
presets: [
"es2015", "react"
],
plugins: ["syntax-dynamic-import"]
}
}]
}]
}每个 loader 对象配置属性如下：
- test ：test 是 一个 正则表达式， 用来匹配不同的类型文件
- use： use 是 一个 数组，里面存放使用的 loader 。 当匹配到文件后，将会按use 里面存放的 loader 去解析处理文件的内容。
如果使用的是loader的默认配置，可以写use:'css-loader','style-loader'；
如果是需要用到额外配置则需要写成对象，讲配置写在options里；
use:[{
loader:'babel-loader',
options: {
presets: [
"es2015", "react"
],
plugins: ["syntax-dynamic-import"]
}
}]**使用这些loader 时，必须先安装它们。**
多环境切换 loader 配置
如果你需要基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内，你可以直接修改配置，或者返回一个将会被合并的对象：
// vue.config.js
module.exports = {
configureWebpack: config => {
if (process.env.NODE\_ENV === 'production') {
// 为生产环境修改配置...
} else {
// 为开发环境修改配置...
}
}
}配置
使用 configureWebpack 简单配置
/ vue.config.js
module.exports = {
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin()
]
}
}该对象将会被 webpack-merge 合并入最终的 webpack 配置。
使用 chainWebpack 高级配置
Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。这个库提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。
它允许我们更细粒度的控制其内部配置。
1. 修改loader
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
// 修改它的选项...
return options
})
}
}2. 添加新的loader
// vue.config.js
module.exports = {
chainWebpack: config => {
// GraphQL Loader
config.module
.rule('graphql')
.test(/.graphql$/)
.use('graphql-tag/loader')
.loader('graphql-tag/loader')
.end()
// 你还可以再添加一个 loader
.use('other-loader')
.loader('other-loader')
.end()
}
}3.替换一个规则里的 Loader
如果你想要替换一个已有的基础 loader，例如为内联的 SVG 文件使用 vue-svg-loader 而不是加载这个文件：
// vue.config.js
module.exports = {
chainWebpack: config => {
const svgRule = config.module.rule('svg')
// 清除已有的所有 loader。
// 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
svgRule.uses.clear()
// 添加要替换的 loader
svgRule
.use('vue-svg-loader')
.loader('vue-svg-loader')
}
}4. 引用全局共用的样式文件
module.exports = {
// ...
css: {
loaderOptions: {
sass: {
// 根据自己样式文件的位置调整
data: `@import "@src/css/base.scss";`
}
}
}
};原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
