webpack之多页面应用程序配置

webpack.config.js中entry用hash的形式定义，output的filename写成[name].bundle.js

var path = require("path");
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	entry: {
		main: './src/script/main.js',
		pageOne: './src/script/pageOne.js',
		pageTwo: './src/script/pageTwo.js'
	},
	output: {
		path: path.resolve(__dirname,'./dist/js'),
		filename: '[name].bundle.js'
	},
	module:{
		rules: [
			{test: /\.css$/, use: 'css-loader'}
		]
	},
	plugins: [new htmlWebpackPlugin]
}

在src/script下面新建下面pageOne.js和pageTwo.js文件
pageOne.js

function helloPg1(){alert("hello");}
helloPg1();

pageTwo.js

function helloPg2(){alert("hello");}
helloPg2();

执行 npm run webpack的结果如下

Built at: 2019-08-21 17:40:09
            Asset       Size  Chunks             Chunk Names
       index.html  315 bytes          [emitted]
   main.bundle.js    1.9 KiB       0  [emitted]  main
pageOne.bundle.js  946 bytes       1  [emitted]  pageOne
pageTwo.bundle.js  946 bytes       2  [emitted]  pageTwo
Entrypoint main = main.bundle.js
Entrypoint pageOne = pageOne.bundle.js
Entrypoint pageTwo = pageTwo.bundle.js
[0] ./src/script/main.js 74 bytes {0} [built]
[1] ./src/css/main.css 199 bytes {0} [built]
[3] ./src/script/pageOne.js 49 bytes {1} [built]
[4] ./src/script/pageTwo.js 49 bytes {2} [built]
    + 1 hidden module