Javascript 如何在webpack 4中使用动态导入和入口点代码拆分
在我的项目中,我将react与webpack 4和babel一起使用。Javascript 如何在webpack 4中使用动态导入和入口点代码拆分,javascript,reactjs,webpack,webpack-4,code-splitting,Javascript,Reactjs,Webpack,Webpack 4,Code Splitting,在我的项目中,我将react与webpack 4和babel一起使用。 我使用动态导入import()通过react router weback的设计输出: vendor.bundle.js:包含特定的主供应商 [ “babel polyfill”, “反应”, “反应dom”, “redux”, "雷迪克斯·图恩",, “时刻”, ] main.bundle.js:入口点包 动态导入生成的每个页面的捆绑包 我当前的网页包配置: const webpack = require('webpac
我使用动态导入
import()
通过react router
weback的设计输出:
- vendor.bundle.js:包含特定的主供应商
[ “babel polyfill”, “反应”, “反应dom”, “redux”, "雷迪克斯·图恩",, “时刻”, ]
- main.bundle.js:入口点包
- 动态导入生成的每个页面的捆绑包
const webpack = require('webpack');
const rootPath = process.cwd();
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
vendor: [
'babel-polyfill',
'react',
'react-dom',
'redux',
'redux-thunk',
'moment',
],
main: ['./client/src/index.jsx'],
},
output: {
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
publicPath: '/',
},
devtool: 'source-map',
module: {
rules: [
// compile js
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['react', 'es2015', 'stage-2'],
plugins: ['react-hot-loader/babel'],
babelrc: false,
},
},
},
// compile sass
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader?sourceMap'],
},
{
test: require.resolve('blueimp-file-upload'),
loader: 'imports-loader?define=>false',
},
],
},
resolve: {
extensions: ['.js', '.jsx'],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
inject: true,
template: `${rootPath}/client/index.html`,
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
}),
],
devServer: {
hot: true,
inline: true,
contentBase: './client',
port: 6000,
host: '0.0.0.0',
historyApiFallback: true,
disableHostCheck: true,
},
};
但这会产生:*main.bundle.js包括所有供应商react、react dom等。
*和vendor.bundle.js还包含vendors react、react dom等…
*home.bundle.js和其他页面以及自动生成的供应商
vendors~Article~NewArticle.bundle.js
,vendors~Profile/index.bundle.js
如何避免任何代码重复?嘿,我创造了一个希望,这可以帮助你。你不需要修改webpack 4中的配置,它会自动分离你的文件。请检查src/entry.jsx文件。你需要语法动态导入此插件。将供应商区块添加为入口点也是一种不好的做法。@MatheusSilva,为什么这是一种不好的做法?我正在为供应商提供软件包,这样它就可以被缓存,用户不必每次更改都下载整个软件包