Question

我是webpack的新手我在webpack.config.js中有这段代码

var path = require('path');
var webpack = require('webpack');
var pkg = require('./package.json');
var myconfig = require('./webpack.myconfig.js');

// bundle dependencies in separate vendor bundle
var dependencies = Object.keys(pkg.dependencies).filter(function (el) {
  //exclude font packages from vendor bundle & css-toggle-switch
  if (el.indexOf('font') !== -1 || el.indexOf('css-toggle-switch') !== -1) {
    return false;
  }
  else return true;
});

module.exports = {
  entry: {
      libs: dependencies,
      main: './src/index'
  },
  output: {
    path: path.join(__dirname, myconfig.buildPath),
    publicPath: myconfig.uiURL, 
    filename: 'dist/js/[name].js',
    chunkFilename: '[id].[name].js'
  },
  plugins: [
    new webpack.DefinePlugin({
      DEBUG_MODE: JSON.stringify(false),
      TIMEOUT: JSON.stringify(30000),
      API_URL: JSON.stringify(myconfig.apiUrl),
      "process.env": {
        NODE_ENV: JSON.stringify("production")
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'libs',
      filename: 'dist/js/libs.js',
      minChunks: Infinity
    })
  ],
};

这是myconfig.js

myconfig = {
  uiURL: 'http://example.com/',
  apiUrl: 'http://api.example.com/api/'
};

module.exports = myconfig;

如果我运行此语法

webpack -p --config webpack.config.js --progress --colors

我会得到像

这样的结果

/dist/js/libs.js
/dist/js/main.js

但我希望结果不是这样的，我希望结果是：

/dist/js/myconfig.js
/dist/js/libs.js
/dist/js/main.js

我真正想要的是，我想在main.js文件中，它将使用myconfig.apiUrl作为依赖项，所以当我部署到生产或qserver时，我只需要更改myconfig.js。

谢谢

Answer 1

webpack.myconfig.js用于webpack配置文件，因此每次更改webpack.myconfig.js时都必须重建。

您可以使用myconfig.json并发送http请求以动态获取它。

Answer 2

如果您只想在myconfig.js中获得/dist/js/，则可以使用CopyWebpackPlugin。它可以将静态文件从一个路径复制到另一个路径。

添加新的新行plugins部分，如：

 plugins: [
     new CopyWebpackPlugin([{ from: APP_DIR + '\\images', to: APP_DIR + '\\build\\images' }]),
    new webpack.DefinePlugin({
      DEBUG_MODE: JSON.stringify(false),
      TIMEOUT: JSON.stringify(30000),
      API_URL: JSON.stringify(myconfig.apiUrl),
      "process.env": {
        NODE_ENV: JSON.stringify("production")
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'libs',
      filename: 'dist/js/libs.js',
      minChunks: Infinity
    })
  ],

此处CopyWebpackPlugin将文件从一个路径复制到另一个路径。

确保var CopyWebpackPlugin = require('copy-webpack-plugin');位于webpack.config.js＆amp;在package.json＆amp;添加相同内容通过npm安装。

webpack DefinePlugin使用外部config.js

2 个答案: