javascript – Webpack多个入口点与不同的bundle
作者:互联网
我使用webpack 4,我有两个入口点并使用HtmlWebpackPlugin使用<%= htmlWebpackPlugin.files.webpackManifest%>注入包文件在HTML中.
webpack配置:
const path = require('path')
// initialize version.js
require('child_process').exec('node ' + path.resolve('./../scripts/setAppVersion.js'), {cwd: '../'}, function (err, stdout, stderr) {
console.log(err)
})
module.exports = {
mode: 'development',
devtool: 'source-map',
entry: {
main: './src/main.js',
loginPage: './src/components/loginPage/loginPage.js',
},
plugins: [
new CleanWebpackPlugin(['dist'], {
root: path.join(__dirname, '..'),
}),
new extractTextPlugin({
filename: 'bundle.css',
disable: false,
allChunks: true,
}),
new HtmlWebpackPlugin({
template: './src/index.ejs',
hash: true,
// inject: false,
chunks: ['main'],
}),
// generate Login Page
new HtmlWebpackPlugin({
// inject: false,
template: './src/components/loginPage/index.ejs',
hash: true,
chunks: ['loginPage'],
filename: 'loginPage.html',
}),
],
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, '../dist'),
publicPath: '/',
},
module: {
rules:[
{
test: /\.js$/,
use: 'eslint-loader?{fix:true}',
exclude: /node_modules/,
enforce: 'pre',
},
{
test: /\.html$/,
exclude: /node_modules/,
use: 'file-loader?name=[name].[ext]',
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
},
// TODO remove extractTextPlugin after delete all .scss in react-components
{
test: /\.scss$/,
use: extractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader!sass-loader',
}),
},
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader?name=fonts/[name].[ext]',
},
{
test: /\.(png|mp4)$/,
use: 'file-loader',
},
],
},
performance: {hints: false},
optimization: {splitChunks: {chunks: 'all'}},
}
当我使用块时:[‘loginpage’]我在html中只收到一个没有供应商的捆绑文件,如果我没有收到loginPage入口点内主入口点的捆绑包.
解决方法:
尝试将您的优化选项更改为
splitChunks: {
chunks: "initial",
name: 'commons'
}
然后按如下方式调整HtmlWebpackPlugin选项
new HtmlWebpackPlugin({
template: './src/index.ejs',
hash: true,
// inject: false,
chunks: ['main','commons'],
}),
// generate Login Page
new HtmlWebpackPlugin({
// inject: false,
template: './src/components/loginPage/index.ejs',
hash: true,
chunks: ['loginPage','commons'],
filename: 'loginPage.html',
}),
标签:html-webpack-plugin,javascript,webpack,webpack-4 来源: https://codeday.me/bug/20190910/1800110.html