Skip to content

Commit b501dd5

Browse files
gnulnxyyx990803
authored andcommitted
docs: add example for tweaking plugin options (#1025)
1 parent 4130f0d commit b501dd5

File tree

1 file changed

+18
-0
lines changed

1 file changed

+18
-0
lines changed

docs/webpack.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,24 @@ module.exports = {
110110

111111
You will need to familiarize yourself with [webpack-chain's API](https://github.com/mozilla-neutrino/webpack-chain#getting-started) and [read some source code](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-service/lib/config) in order to understand how to leverage the full power of this option, but it gives you a more expressive and safer way to modify the webpack config than directly mutation values.
112112

113+
For example, say you want to change the default location of index.html from */Users/username/proj/public/index.html* to */Users/username/proj/app/templates/index.html*. By referencing [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin#options) you can see a list of options you can pass in. To change our template path we can pass in a new template path with the following config:
114+
115+
``` js
116+
// vue.config.js
117+
module.exports = {
118+
chainWebpack: config => {
119+
config
120+
.plugin('html')
121+
.tap(args => {
122+
args[0].template = '/Users/username/proj/app/templates/index.html'
123+
return args
124+
})
125+
}
126+
}
127+
```
128+
129+
You can confirm that this change has taken place by examining the vue webpack config with the **vue inspect** utility, which we will discuss next.
130+
113131
### Inspecting the Project's Webpack Config
114132

115133
Since `@vue/cli-service` abstracts away the webpack config, it may be more difficult to understand what is included in the config, especially when you are trying to make tweaks yourself.

0 commit comments

Comments
 (0)