1 简单的配置方式
在 vue.config.js 中的 configureWebpack 选项提供一个对象,该对象将会被 webpack-merge 合并入最终的 webpack 配置。
// vue.config.js module.exports = { configureWebpack: { plugins: [ new MyAwesomeWebpackPlugin() ] } }
2 链式操作 (高级)
审查项目的 webpack 配置可以通过命令保存到output.js内查看
vue inspect > output.js
3 修改 Loader 选项
// vue.config.js module.exports = { chainWebpack: config => { config.module .rule('vue') .use('vue-loader') .tap(options => { // 修改它的选项... return options }) } }
4 添加一个新的 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() } }
5 修改插件选项
比方说你想要将 index.html 默认的路径从 /Users/username/proj/public/index.html 改为 /Users/username/proj/app/templates/index.html。
// vue.config.js module.exports = { chainWebpack: config => { config .plugin('html') .tap(args => { return [/* 传递给 html-webpack-plugin's 构造函数的新参数 */] }) } }