如何使用 Webpack 拆分应用程序和供应商代码

Question

我正在使用 react 开始一个新项目 所以我有这个 webpack.config.js 文件应该处理 2 个块，一个用于应用程序代码，一个用于基于 webpack documentation 示例的供应商

webpack.config.js

const webpack = require('webpack');
module.exports = {
    entry: {
        app: './src/App.jsx',
        vendor: ['react', 'react-dom', 'whatwg-fetch']
    },
    output: {
        path: __dirname + './static/',
        filename: 'app.bundle.js'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            filename: 'vendor.bundle.js'
        })
    ],
    module: {
        loaders: [{
            test: /.jsx$/,
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015']
            }
        }, ]
    }
};

当我运行webpack -p 时，我可以看到应该生成我的两个资产，但输出目录中没有任何内容。

Webpack 输出

           Asset    Size  Chunks             Chunk Names
   app.bundle.js    6 kB       0  [emitted]  app
vendor.bundle.js  108 kB       1  [emitted]  vendor
   [6] ./src/App.jsx 3.37 kB {0} [built]
   [7] ./src/IssueAdd.jsx 3.57 kB {0} [built]
   [9] ./src/IssueList.jsx 5.46 kB {0} [built]
  [10] ./src/IssueFilter.jsx 2.52 kB {0} [built]
  [20] multi react react-dom whatwg-fetch 52 bytes {1} [built]
    + 16 hidden modules

Webpack 版本是 3.8.1，带有 windows 7 开发环境。 我在这里遗漏了什么吗？

Answer 1

如果您希望在输出文件夹中发出两个单独的文件首先您必须确保每次更新文件时这些文件都有新名称，其中一种方法是使用缓存 [chunkhash]，如 webpack 中所建议的那样3.8.1Documentation

在文件顶部包含路径，所以你的输出应该是这样的（你可以相应地改变它）：

 var path = require('path');

 output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },

在你的插件里面你可以给名字

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor'
    }) 
]

你可以阅读更多关于 Webpack 的内容3.8.1 output-filename