vue-cli3配置webpack generate-asset-plugin

　　最近尝试将vue项目中的后台URL抽离到打包后的配置文件中，看到有使用generate-asset-plugin在build时生成配置文件的做法，倒腾了一下午使该webpack plugin在vue-cli3中生效，虽然后面换了其他方法，也在此Mark一下，方便遇到的朋友快速过坑。

 

1.安装插件

npm install -save generate-asset-webpack-plugin

 

2.使用插件

vue-cli3中webpack的打包配置都放在根目录下vue.config.js中哦，vue-cli2放在build目录下。

1）引入plugin

const GenerateAssetPlugin = require('generate-asset-webpack-plugin');

2）定义需要生成的配置内容，配置项在cfgJson对象中定义，该函数在plugin中用到

let createConfig = function(compilation){
  let cfgJson = {
    server_url:"http://127.0.0.1"
  };
  
  return JSON.stringify(cfgJson);
}

3）在module.exports中调用plugin：在module.exports中增加属性configureWebpack，configureWebpack的plugins中调用plugin(其他plugin也可以在这里引入，与vue-cli2方法一致)。小编在这里设置的时候看到了module.exports的chainWebpack属性，这个属性也可以用来配置webpack，但可能太高级了，搞了很久不知道怎么引入其他plugin，就放弃了直接使用configureWebpack。

module.exports = {
  configureWebpack: {
    plugins: [
      new GenerateAssetPlugin({
        filename: 'dynamicConfig.json',
        fn: (compilation, cb){
          cb(null, createConfig(compilation))
        }
      })
    ]
  }
}

3.编译后，dist根目录下就会出现dynamicConfig.json文件啦

 

 

generate-asset-webpack-plugin