webpack入口和出口

什么是入口？

入口就是开始打包的地方，例如scr下的main.js文件；

什么是多入口？

多入口就是允许从多个文件开始打包。举个例子：一个项目中有 user 和 admin 两部分，我们希望将这两部分分别进行打包，就可以使用多入口生成不同的文件。

什么是出口？

出口就是会根据scr底下的mian.js文件为一个入口，然后把这个打包完的结果输出在这个dist文件夹底下。

入口和出口在webpack.config.js下配置。

1，单入口

const path = require('path');
module.exports = {
	// 入口
	entry: './src/main.js',
	// 出口
	output:path.resolve(__dirname, 'dist') // 出口的文件夹-路径
	filename: 'index.js' // 默认的名字
}
// 生成./dist/index.js 文件

如果要修改打包出来的默认名字，有两种方式

方式一： 没有filename 默认名称的情况，entry可以接受一个对象，对象的key就是打包出来的名字；

const path = require('path');
module.exports = {
	// 入口
	entry:{
		app: './src/main.js',
	}
	// 出口
	output:path.resolve(__dirname, 'dist') 
}
// 生成 ./dist/app.js 文件

方式二：通过出口[name]占位符的方式，打包两个入口文件

const path = require('path');
module.exports = {
	// 入口
	entry:{
		app: './src/main.js',
		list: './src/main.js'
	}
	// 出口
	output:{
		path.resolve(__dirname, 'dist');
		filename: '[name].js'  // 通过一种占位符的方式
	}
}
// 生成 ./dist/app.js文件 和 ./dist/list.js文件

打包出来的js文件需要在apphtml文件中引用，如果需要加前缀 或者使用CDN上传的话就需要publicPath这样一个配置，达到https://cdn.xxxxx.com/main.js效果

const path = require('path');
module.exports = {
	// 入口
	entry:{
		app: './src/main.js',
		list: './src/main.js'
	}
	// 出口
	output:{
		publicPath: 'https://cdn.xxxxx.com/'
		path.resolve(__dirname, 'dist') 
		filename: '[name].js' 
	}
}
// <script src="https://cdn.xxxxx.com/app.js"></script>

2，多入口

步骤：

1. 配置多个entry入口；
2. 在plugins中创建多个 HtmlWebpackPlugins ，因为这里面可能是要对应多个页面

这里的配置，每个 new HtmlWebpackPlugin() 就根据html模板文件打包生成 html文件，这里我们有两个入口，也希望能分别打包生成不同的 html，就需要分别配置。

还有就是 chunks 指定我们要引入的 js 文件，名字可以理解为 entry 中配置的名字。例子中两个入口使用的是同一个 index.html 文件进行打包的，使用 chunks 指定要引入的 js文件就不会导致代码重复混乱

const path = require('path');
module.exports = {
	// 入口
	entry:{
		app: './src/app.js',
		main: './src/main.js'
	},
	// 出口
	output:{
		path.resolve(__dirname, 'dist') 
		filename: '[name].js' 
	},
	// 插件
	plugins:[
		new HtmlWebpackPlugins({
			template: './src/app.js', // 指定模板文件
			filename: 'app.html', // 生成的文件名
			chunks: ['app'], // 选择需要引入的js文件
		}),
		new HtmlWebpackPlugins({
			template: './src/main.js',
			filename: 'main.html',
			chunks: ['main']
		})
	]
}

filename: ‘[name].[hash:8].js’ // 打包输出文件的名字, 插入hash值

3，出口文件使用hash

const path = require('path');
module.exports = {
	// 入口
	entry:{
		app: './src/main.js',
		list: './src/main.js'
	}
	// 出口
	output:{
		path.resolve(__dirname, 'target');
		filename: '[hash:5].js'  //配置的合并的js文件的规则（取hash的五位)
		// filename: '[name].[hash:8].js' // 也可以使用这种方式 app.89sd989b.js
	}
}

结果：