02-webpack5学习-多入口打包

项目结构

webapckMoreEntry
│  package-lock.json
│  package.json
│  webpack.config.js
├─public
│      index.html
│      mine.html
└─src
        index.js
        mine.js

安装依赖

在webapckMoreEntry目录下运行

npm i webpack webpack-cli --save-dev

webapck.config.js配置文件

const { resolve } = requrie('path');
module.exports = {
	mode:"development",
	entry:{
		index:"./src/index.js",
		mine:"./src/mine.js"
	},
	output:{
		path:resolve(__dirname,"dist"),
		filename:"[name].build.js",
		clean:true
	}
}

webpack中的关键属性

entry属性

entry属性是webpack配置打包文件入口指定的属性，有三种方式

值为字符串
当enrty的值为字符串时，这种场景适用于单个入口打包
值为数组
当entry的值为数组时，将多个js打包到一个文件中，如果output含有[name]字符串，则此字符串被替换为main
值为对象
当entry的值为对象时，需要将output的filename属性在任意位置上加上[name]，但打包后输出的每一项的文件名为对应项的key值

output属性

output属性是webapck打包后输出的指定属性，是一个具有filename和path属性的对象

path：此属性接受一个字符串，决定打包后输出文件的路径
filename：此属性接受一个字符串，决定打包后输出文件的命名规则
clean：此属性接受一个布尔值，每次打包前会清理输出得文件，例子中清除得是dist文件夹中的内容

HTML文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webapckBase</title>
    <!-- 这个是index.html文件，如果是mine.html文件，则下面的src指向为'../dist/mine.build.js' -->
    <script src="../dist/index.build.js"></script>
  </head>
  <body></body>
</html>

打包命令

方式一：在webapckMoreEntry目录下运行

webpack --config ./webapck.config.js

方式二：在package.json文件的scripts属性新增如下命令

{
	...
	"scripts":{
		"build":"webpack --config ./webpack.config.js"
	}
	...
}

修改保存后，在webapckMoreEntry目录下运行如下命令：

npm run build

打包后的目录

webapckMoreEntry
│  package-lock.json
│  package.json
│  webpack.config.js
├─dist
│      index.build.js
│      mine.build.js
├─public
│      index.html
│      mine.html
└─src
        index.js
        mine.js

原文链接：https://blog.csdn.net/weixin_39876270/article/details/125236557