webpack——多个entry和output配置、js不同文件的指定引用

0、依赖

npm init -y
npm install webpack webpack-cli -D
npm install html-webpack-plugin -D(作用:用模板生成html,自定引入js文件)

1、在src下新增home.js和other.js

2、新增index.html(./webpack-pages/index.html)

3、webpack配置

var HtmlWebpackPlugin = require('html-webpack-plugin');
let path = require('path');

module.exports = {
	mode: 'development',
	// 多入口(首页和other页)
	entry: {
		home: './src/home.js',
		other: './src/other.js',
	},
	output: {
		// name代表home或者other
		filename: '[name].js', // filename: "bundle.js" -- error:两个出口
		path: path.resolve(__dirname, 'dist')
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: __dirname + "/index.html",
			filename: 'index.html',
		}),
		new HtmlWebpackPlugin({
			template: __dirname + "/index.html",
			filename: 'home.html',
		})
	],
}

4、index.html打包后的结果

5、如何实现分别打包(chunks)

plugins: [
		new HtmlWebpackPlugin({
			template: __dirname + "/index.html",
			filename: 'index.html',
			chunks:['home']
		}),
		new HtmlWebpackPlugin({
			template: __dirname + "/index.html",
			filename: 'other.html',
			chunks:['home','other']
		})
	],

6、效果图

发布了245 篇原创文章 · 获赞 54 · 访问量 16万+

猜你喜欢

转载自blog.csdn.net/Sicily_winner/article/details/104241056