今天我潜入了Webpack的内部,我设法使用了许多有用的功能(通过Webpack加载器),如CSS模块和Babel转换器.我想用它来制作一个React应用程序(没有create-react-app).
这是我的配置文件:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');
module.exports = {
entry: {
main: './src/index.js',},output: {
path: path.resolve(__dirname,'dist'),filename: '[name].js'
},module: {
rules: [
{
test: /\.js|jsx$/,exclude: /node_modules/,use: {
loader: "babel-loader"
}
},{
test: /\.html$/,use: [
{
loader: "html-loader",options: { minimize: true }
}
]
},{
test: /\.css$/,use: [
{
loader: 'style-loader'
},{
loader: 'css-loader',query: {
modules: true,localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
]
}
]
},plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",filename: "index.html"
})
]
};
因为我现在有一个入口点,我的整个包被转换成一个JS文件.但是,随着我的反应应用程序的增长,将捆绑包分成多个块可能会更好,这样可以更快地下载它们(这是正确的术语吗?).
题:
>将应用程序拆分为多个chunck时,我需要考虑哪些方面?
>如何将应用程序拆分为多个块?我是否只输入多个入口点(如果是这样的话,那么什么是战术入口点?)?
最佳答案
您不需要有多个入口点.
原文链接:https://www.f2er.com/js/429270.html你可以基于
>路线
>块的最大大小
>为外部依赖项设置单独的块
>在任何有意义的模块中使用动态导入
如果您不确定要使用哪种参数,请使用webpack的splitchunk插件(https://webpack.js.org/plugins/split-chunks-plugin/)的默认值.