webpack 单独打包某个文件

场景：某些项目配置，比如URL，版本，Ip需要经常修改，在每次修改后都需要重新打包项目，很繁琐。考虑将常修改的配置专门写入配置文件，比如json或者js里，然后能够在打包后，生成对应的单独的文件，便于修改。

1. webpack.base.conf.js 定义入口

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js',
    systemConfig:['./src/views/frame/common/options.json']
  },
  ...
}

2. webpack.base.conf.js CommonsChunkPlugin

  plugins: [
      new webpack.optimize.CommonsChunkPlugin({
          name:'systemConfig', // 上面入口定义的节点组
          filename:'system-config.js' //最后生成的文件名
      }),
     ...
  ]

3. 定义和使用文件
   download.vue

<script>
    import DefaultOptions from "./options.json"
    export default{
        create:function () {
          console.log(DefaultOptions);
        }
    }
</script>

options.json

{
    "url":"www.hhaha.com"
}

4. webpack 打包

1. npm run build
   2)查看dist/static/js/下的文件

   
   image.png
   

   3.查看文件内容，已经单独生成。

   
   image.png

问题：虽然单独生成指定文件，但是文件被压缩，还是不太容易阅读和修改