您的位置:首页 > Web前端 > Vue.js

简述vue-cli中chainWebpack的使用方法

2019-07-30 16:43 2381 查看

前言

在项目开发中我们难免碰到需要对webpack配置更改的情况,今天就主要来讲一下在vue.config.js中对一些配置的更改,简单介绍一下loader的使用;用configureWebpack简单的配置;用chainWebpack做高级配置;包括对loader的添加,修改;以及插件的配置

1、首先简单介绍一下webpack中loader的简单使用:

loader:是webpack用来预处理模块的,在一个模块被引入之前,会预先使用loader处理模块的内容,在你打包的时候对某些内容需要loader来处理一下,比如css模块;默认webpack只会处理js代码,所以当我们想要去打包其他内容时,就需要相应的loader去处理某些内容

使用方法:

在配置文件中webpack.config.js加入module属性,该属性是一个对象,在这个属性中有一个rules字段,先上代码

module:{
rules:[{
test:/\.js$/,
use:[{
loader:'babel-loader',
options: {
presets: [
"es2015", "react"
],
plugins: ["syntax-dynamic-import"]
}
}]
}]
}

rules是一个数组,你所有的loader配置都可以写在这个数组里,每个loader配置是一个对象,匹配不同的规则;

test:test后是一个正则表达式,匹配不同的文件类型;

use:在这个规则中,当你匹配了这个文件后,需要使用相应的loader去处理这类型的文件,use接收的是一个数组,意味着当他匹配到文件后,它可以启用很多的loader去处理文件的内容;

如果使用的是loader的默认配置,可以写use:['css-loader','style-loader'];

如果是需要用到额外配置则需要写成对象,讲配置写在options里;

当然,还会有其他的一些属性比如(exclude、include等),这里就不再详细赘述

在你使用这些loader之前需要用npm去安装这些包;

2、用configureWebpack简单的配置;

/ vue.config.js
module.exports = {
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin()
]
}
}

该对象将会被 webpack-merge 合并入最终的 webpack 配置。

如果你需要基于环境有条件地配置行为,或者想要直接修改配置,那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内,你可以直接修改配置,或者返回一个将会被合并的对象:

// vue.config.js
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
} else {
// 为开发环境修改配置...
}
}
}

3、用chainWebpack做高级配置

Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。这个库提供了一个 webpack 原始配置的上层抽象,使其可以定义具名的 loader 规则和具名插件,并有机会在后期进入这些规则并对它们的选项进行修改。

它允许我们更细粒度的控制其内部配置。接下来有一些常见的在 vue.config.js 中的 chainWebpack 修改的例子。

官方文档给我提供了一些简单的示例:

修改 Loader 选项

// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
// 修改它的选项...
return options
})
}
}

添加一个新的 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,

// 添加svg-sprite-loader
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.tap(options => {
options = {
symbolId: 'icon-[name]'
}
return options
})

修改插件的代码可以看下面的例子;

先上代码,今天主要讲我们项目中配置,配置的api地址: https://cli.vuejs.org/zh/conf...

const path = require('path')
const webpack = require('webpack')
module.exports = {
// 修改output.path
outputDir: 'dist',
// 修改output.publishPath
publishPath: './',
chainWebpack: config => {
// 添加全局scss文件
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => { //匹配到所有需要导入的文件
config.module.rule('scss').oneOf(type).use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, 'src/css/base.scss')
]
})
})// 添加svg-sprite-loader
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.tap(options => {
options = {
symbolId: 'icon-[name]'
}
return options
})
// 移除 prefetch 插件 //预加载
config.plugins.delete('prefetch')
// 引入
const chunkFolder = process.env.NODE_ENV !== 'production' ? 'debug' : 'dist'
config.plugin('dll-reference-plugin')
.use(webpack.DllReferencePlugin)
.tap(options => {
options[0] = {
context: __dirname,
manifest: require(path.join(__dirname, `./src/common_chunk/${chunkFolder}/manifest.json`))
}
return options
})
config.plugin('add-asset-html-webpack-plugin')
.use('add-asset-html-webpack-plugin')
.tap(options => {
options[0] = {
filepath: path.resolve(__dirname, `./src/common_chunk/${chunkFolder}/lib_*.js`)
}
return options
})
}
}

上述代码里使用了style-resources-loader,可以自动化导入文件;

DllReferencePlugin这个插件是为了使第三方以来和我们自己编写的代码分开打包,提升打包速度;需要和add-asset-html-webpack-plugin这个插件一起使用;

使用这个插件打包后,在src/common_chunk这个文件夹下生成工具库,将第三方依赖打包到一个文件里,并生成一个所有库代码的一个索引manifest.json文件

ps:全局引入公共样式文件的另一种方法,这样也可以直接在使用公共样式了

module.exports = {
// ...
css: {
loaderOptions: {
sass: {
// 根据自己样式文件的位置调整
data: `@import "@src/css/base.scss";`
}
}
}
};

总结

以上所述是小编给大家介绍的vue-cli中chainWebpack的使用方法 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

您可能感兴趣的文章:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  vue-cli chainWebpack