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

最新推荐文章于 2023-09-18 19:23:11 发布

winner_corl

最新推荐文章于 2023-09-18 19:23:11 发布

阅读量3.4k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/Sicily_winner/article/details/104241056

版权

本文介绍了如何使用Webpack配置多个entry和output，以及如何通过html-webpack-plugin来指定引用不同的js文件。通过实例展示了从创建依赖，新建home.js和other.js，到生成index.html，最后实现分别打包chunks的过程。

摘要由CSDN通过智能技术生成

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: