Webpack4.x 文件多入口、多出口、html插件使用(一)

一、多个文件打包在一起(打包成一个文件),例如将这两个js文件打包成一个js文件:(多个入口,一个出口)

Webpack4.x 文件多入口、多出口、html插件使用(一)_第1张图片

webpack.config.js配置如下:entry入口,数组形式,按顺序打包,output出口,

Webpack4.x 文件多入口、多出口、html插件使用(一)_第2张图片

然后运行:npm run build (备注:在package.json文件scripts中配置如下即可)

Webpack4.x 文件多入口、多出口、html插件使用(一)_第3张图片

运行完命令后,如下图,证明打包完成

Webpack4.x 文件多入口、多出口、html插件使用(一)_第4张图片

打包好的boundle.js内容如下图:

Webpack4.x 文件多入口、多出口、html插件使用(一)_第5张图片


二、多个入口,多个出口:

webpack.config.js按照如下配置

Webpack4.x 文件多入口、多出口、html插件使用(一)_第6张图片

运行npm run build,成功打包成两个js,如下图:

Webpack4.x 文件多入口、多出口、html插件使用(一)_第7张图片


三、html-webpack-plugin:

**注意:

1、先安装依赖

webpack(npm i webpack  -D),webpack-cli(npm i webpack-cli -D)

2、安装html-webpack-plugin

      npm i html-webpack-plugin  -D

3、引入、使用

Webpack4.x 文件多入口、多出口、html插件使用(一)_第8张图片

模板页面标题配置:

Webpack4.x 文件多入口、多出口、html插件使用(一)_第9张图片

运行npm run build ,生成结果如下图

Webpack4.x 文件多入口、多出口、html插件使用(一)_第10张图片



参考:https://www.npmjs.com/package/html-webpack-plugin

你可能感兴趣的:(Web前端,Webpack)