我使用webpack 4
并且我有两个入口点并使用HtmlWebpackPlugin
在html中使用<%=htmlWebpackPlugin.files.webpackManifest%>
注入捆绑文件。
webpack config:
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'}},
}
当我使用chunks:['loginpage']
时,我在html中只收到一个没有供应商的捆绑文件,如果我没有收到main
入口点loginPage
入口点的捆绑包。