vue-cli@4中默认的html-webpack-plugin配置
本文章代码所用vue-cli的版本号为:@vue/cli 4.1.2如何获取默认配置配置vue.config.js在项目根目录下创建vue.config.js文件,键入如下代码:const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {configureWebpack: confi...
·
本文章代码所用vue-cli的版本号为:
@vue/cli 4.1.2
如何获取默认配置
- 配置vue.config.js
在项目根目录下创建vue.config.js
文件,键入如下代码:
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
configureWebpack: config => {
config.plugins.forEach((val) => {
if (val instanceof HtmlWebpackPlugin) {
console.log(val)
console.log(val.options.templateParameters.toString())
}
})
}
}
其中config就是vue-cli中,webpack的默认配置
-
修改
eslintrc.js
在该文件的eslintre.js中找到rules字段,删除no-console
:
-
运行
npm run build
运行npm run build ,控制台就会打印出相关的配置
有些外部工具可能需要通过一个文件访问解析好的 webpack 配置,比如那些需要提供 webpack 配置路径的 IDE 或 CLI。在这种情况下你可以使用如下路径:
<projectRoot>/node_modules/@vue/cli-service/webpack.config.js
完整的默认html-webpack-plugin配置
{
options: {
template: 'D:\\nodeProgram\\vue-demo\\public\\index.html',
templateParameters: (compilation, assets, pluginOptions) => {
// enhance html-webpack-plugin's built in template params
let stats
return Object.assign({
// make stats lazy as it is expensive
get webpack () {
return stats || (stats = compilation.getStats().toJson())
},
compilation: compilation,
webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: pluginOptions
}
}, resolveClientEnv(options, true /* raw */))
},
filename: 'index.html',
hash: false,
inject: true,
compile: true,
favicon: false,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
collapseBooleanAttributes: true,
removeScriptTypeAttributes: true
},
cache: true,
showErrors: true,
chunks: 'all',
excludeChunks: [],
chunksSortMode: 'auto',
meta: {},
title: 'Webpack App',
xhtml: false
}
}
修改默认配置
有两种方式可以修改默认配置:
- 直接修改,在获取到html-webpack-plugin的默认配置对象后,可通过修改该对象直接修改配置,比如修改输出文件名:
configureWebpack: config => {
config.plugins.forEach((val) => {
if (val instanceof HtmlWebpackPlugin) {
console.log(val)
console.log(val.options.templateParameters.toString())
val.options.filename = 'indexx.html' // 修改输出文件名
}
})
}
- 链式修改,它比直接修改表达能力更强而且更加安全,需要用到
chainWebpack
,以修改模板路径为例,代码如下:
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].template = '/Users/username/proj/app/templates/index.html'
return args
})
}
详细信息可以查看官方文档:vue-cli webpack相关 —— 链式操作-高级
更多推荐
已为社区贡献5条内容
所有评论(0)