zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    Android 动画-alpha(渐变透明度动画效果)
    Memento(备忘录)
    Mediator(中介者)
    Iterator(迭代器)
    Command(命令)
    Chain of Responsibility(责任链)
    Template Method(模板方法)
    Interpreter(解释器)
    Proxy(代理)
    Flyweight(享元)
  • 原文地址:https://www.cnblogs.com/wurijie/p/11904060.html
Copyright © 2011-2022 走看看