如何使用 Webpack 拆分应用程序和供应商代码
How to split app and vendor code with Webpack
我正在用 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,windows7 开发环境。
我在这里遗漏了什么吗?
如果您希望在输出文件夹中发出两个单独的文件 首先,您必须确保每次更新文件时这些文件都有新名称,其中一种方法是按照建议使用缓存 [chunkhash]在 webpack 3.8.1 Documentation
包括文件顶部的路径,所以你的输出应该是这样的(你可以相应地改变它):
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
我正在用 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,windows7 开发环境。 我在这里遗漏了什么吗?
如果您希望在输出文件夹中发出两个单独的文件 首先,您必须确保每次更新文件时这些文件都有新名称,其中一种方法是按照建议使用缓存 [chunkhash]在 webpack 3.8.1 Documentation
包括文件顶部的路径,所以你的输出应该是这样的(你可以相应地改变它):
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