在多个入口点的情况下,这是我得到的例子:
module.exports = {
entry: {
user1: path.join(__dirname, './client/app1.js'),
user2: path.join(__dirname, './client/app2.js'),
user3: path.join(__dirname, './client/app3.js')
},
output: {
path: path.join(__dirname, './static/bundle/'),
filename: '[name].js'
},
...
}
Run Code Online (Sandbox Code Playgroud)
但是,我对这个词感到困惑entry。是指入口网址吗?如果用户访问 root 然后访问另一个页面怎么办?
例如,假设我有一个站点example.com和另外两个页面,example.com/register并且example.com/contact. 现在,我想共同文件example.com并加载只登记在模块代码example.com/register并接触模块代码example.com/contact。入口点是一样的,example.com。上述解决方案在这种情况下是否有效?
但是,我对术语条目感到困惑。是指入口网址吗?
不,它是 webpack 开始打包的入口。如果您的 webpack 配置中有多个条目,那么将会有多个输出包。这就是您输出[name].js在文件名中使用 a 的原因。
由您来确保正确的包可用于加载的任何特定页面。
在评论中回答问题:
如果我理解你想要做什么,我相信你可以使用CommonsChunkPlugin为每个页面构建一个公共包和一个条目。
所以你的 webpack 配置可能看起来像
module.exports = {
entry: {
index: path.join(__dirname, './src/index.js'),
register: path.join(__dirname, './src/register.js'),
contact: path.join(__dirname, './src/contact.js')
},
output: {
path: path.join(__dirname, './static/bundle/'),
filename: '[name].js'
},
plugins: [
new CommonsChunkPlugin("commons.js")
]
...
}
Run Code Online (Sandbox Code Playgroud)
那么您的索引页面将类似于
<html>
<head></head>
<body>
...
<script src="static/bundle/commons.js"></script>
<script src="static/bundle/index.js"></script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
注册页面将类似于
<html>
<head></head>
<body>
...
<script src="static/bundle/commons.js"></script>
<script src="static/bundle/register.js"></script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
联系页面将类似于
<html>
<head></head>
<body>
...
<script src="static/bundle/commons.js"></script>
<script src="static/bundle/contact.js"></script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
6980 次 |
| 最近记录: |