Vue cli webpack相关

简单的配置方式

调整webpack配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象

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

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

警告：

有些 webpack 选项是基于 vue.config.js 中的值设置的， 所以不能直接修改。例如你应该修改 vue.config.js 中的 outputDir 选项而不是修改 output.path ; 你应该修改 vue.config.js 中的publicPath 选项 而不是修改output.publicPath。这样做是因为 vue.config.js 中的值会被用在配置里最多的地方，以确保所有的部分都能正常工作在一起。

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

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

链式操作(高级)

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')
        .tap( options => {
            // 修改它的选项
            return options
        })
    }
}

提示： 对于 CSS 相关loader来说，推荐使用 css.loaderOptions 而不是直接链式指定loader。这是因为每种CSS文件类型都有多个规则，而 css.loaderOptions 可以确保你通过一个地方影响到所有的规则。

添加一个新的 Loader

// vue.config.js 
module.exports = {
    chainWebpack: config => {
        config.module
        .rule('graphql')
        .test('/\.graphql$/')
        .use('graphql-tag/loader')
         .loader('graphql-tag/loader')
         .end()
        // 添加新的loader
        .use('other-loader')
         .loader('other-loader')
         end()
    }
}

替换一个规则里的 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')
    }
}

修改插件选项

// vue.config.js
module.exports = {
    chainWebpack: config => {
        config.plugin('html')
        .tap( args => {
            return [/*传递给html-webpack-plugins 构造函数的新参数*/]
        } )
    }
}

需要熟悉 webpack-chain 的API并阅读一些源码以便了解如何最大程度利用好这个选项，但是比起直接修改 webpack 配置，它的表达能力更强，也更为安全。

比方说想要将 index.html 默认的路径从 /Users/username/pro/public/index.html 修改为 /User/username/pro/app/templates/index.html。通过参考 html-webpack-plugin 你能看到一个可以传入的选项列表。可以通过以下配置中传入一个新的模板路径来改变它：

// vue.config.js
module.export = {
    chainWebpack: config => {
        config.plugin('html')
        .tap( args => {
            args[0].template = '/Users/username/pro/app/templates/index.html'
            return args
        })
    }
}

审查项目的 webpack 配置

因为 @vue/cli-service 对 webpack 配置进行了抽象，所以理解配置中包含的东西比较困难，尤其是自行对其调整的时候

vue-cli-service 暴露了 inspect 命令用于审查解析好的 webpack 配置。那个全局的vue可执行程序同样提供了inspect命令，这个命令只是简单的把 vue-cli-service inspect 代理到你的项目中。

该命令将会解析出来 webpack 配置、包括链式访问规则和插件的提示打印到stdout。

也可以将其输出重定向到一个文件以便进行查阅：

vue inspect > output.js

注意它输出的并不是一个有效的 webpack 配置文件，而是一个用于审查的被序列化的格式。