webpack4.x实现Js和Html多入口、多出口以及html-webpack-plugin插件实现html各自引入各自的js文件第三节

太过爱你忘了你带给我的痛 2022-05-28 12:17 186阅读 0赞

Webpack4.x 多入口、多出口、hhtml-webpack-plugin插件的使用

在目录下创建src目录,使用npm init -y 生成package.json依赖模块文件,我们把执行命令放在script里面,这样我们只要执行npm run build就可以了.

{
      "name": "webpack4",
      "version": "1.0.0",
      "description": "",
      "main": "webpack.config.js",
      "scripts": {
        "build": "webpack --mode development"
      },
      "author": "",
      "license": "ISC"
    }

在目录下在创建一个dist目录,里面写个index.html文件

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <script type="text/javascript" src="bundle.js"></script>
    </body>
    </html>

在src下创建一个index.js文件

document.write('welcome suzhou');

创建 webpack.config.json文件

const path = require('path'); module.exports = { entry:'./src/index.js', output:{ path:path.resolve(__dirname,'dist'), filename:'bundle.js' // 表示输出的js文件名 } }

这时只要运行一下 npm run build 就可以打包出bundle.js了.

--------------------

**JS多入口(打包到一起,也就是多对一打包)**

这时候我们在以上项目目录的基础上,在src下增加一个index2.js文件

document.write('welcome Strive');

我们在编写webpack.config.js,entry入口是支持数组的,而且打包是按数组由前向后打包的。

const path = require('path'); module.exports = { entry:['./src/index.js','./src/index2.js'], output:{ path:path.resolve(__dirname,'dist'), filename:'bundle.js' //名字可以随便起 } };

这时候我们只要在执行 npm run build 就可以了.

--------------------

**JS多入口多出口?也就是多对多的实现.**

我们继续来编写webpack.config.js

const path = require('path'); module.exports = { entry:{ //entry入口文件支持json的形式 index: './src/index.js', index2: './src/index2.js' }, output:{ path:path.resolve(__dirname,'dist'), //filename前面我们可以使用一个变量[name],这个就表示获取entry里面的key作为文件名加在前面 //打出来是index-bundle.js //和index2-bundle.js filename:'[name]-bundle.js' } }

这时运行 npm run build ,这时dist里面打包出来的就是index-bundle.js和index2-bundle.js了.

--------------------

如何使html自动引入js文件?

这时候我们想到了每次向html中手动引入script文件太麻烦,如何让它自动引入呢?这时候我们想到了webpack的plugins插件.

首先我们要使用的是**html-webpack-plugin**插件,这个插件的注意功能就是生成页面.

1.安装**html-webpack-plugin**插件,因为是开发的时候需要,所以在后面加-D

而这个插件是依赖webpack和webpack-cli的,所以我们先将webpack和webpack-cli下载到本地 cnpm i webpack@4.1.0 -D cnpm i webpack-cli -D cnpm i html-webpack-plugin -D

2.安装成功以后,在webpack.config.js里面引入

const HtmlWebpackPlugin = require('html-webpack-plugin');

3.在webpack.config.js里面的plugins里面配置插件

这时我们就可以执行 npm run build 了.

我们发现自动创建了dist目录,里面有index.html,index-bundle.js,index2-bundle.js目录,并且index.html自动引入了index-bundle.js,index2-bundle.js文件.

--------------------

### html-webpack-plugin插件配置模板HTML文件 ###

我们在src下写一个index.html模板文件

这个时候我们再运行npm run build,我发现自动生成了dist目录,里面的index是我们先前在src里面写的模板文件,并且自动引入了js文件.

自动配置页面title

**如果配置了title,一定要在模板html中使用**

\- index.html

// index.html模板 <!DOCTYPE html> <html> <head> <title><%= htmlWebpackPlugin.options.title%></title> </head> <body> <div id="root"></div> </body> </html>

** 如何自动消除src引入的缓存问题?**

自动引入的src链接，如何消除消除缓存呢?我们只要在html-webpack-plugin配置中增加一个hash为true的配置,它就会自动在引入的src地址后面增加一段hash值

那么我们要上线之前是要压缩输出的，如何操作呢?

我们需要向html-webpack-plugin插件中配置**minify**压缩代码

**多个HTML模板区分输出配置**

那么要是我们多个html模板文件,如何区分开生成多个页面呢？

只要以链式的方法,再调用一次html-webpack-plugin插件,每次调用都要指定filename也就是生成页面的名字.调用一次生成一个页面,调用两次生成两个页面,以此类推.

比如说我们在src下在创建一个index2.html模板文件

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry:{ index: './src/index.js', index2: './src/index2.js' }, output:{ path:path.resolve(__dirname,'dist'), //filename前面我们可以使用一个变量[name],这个就表示获取entry里面的key作为文件名加在前面 //打出来是index-bundle.js //和index2-bundle.js filename:'[name]-bundle.js' }, plugins:[ new HtmlWebpackPlugin({ filename:'index.html', //每次调用指定生成的html名称 minify:{ collapseWhitespace:true //折叠空白区域 也就是压缩代码 }, hash:true, title:'I love China', template: './src/index.html' //模板地址 }), new HtmlWebpackPlugin({ filename:'index2.html', //每次调用指定生成的html名称 minify:{ collapseWhitespace:true //折叠空白区域 也就是压缩代码 }, hash:true, title:'第二个页面', template: './src/index2.html' //模板地址 }) ] }

**生成的HTML文件引入各自的JS文件配置**

那么我们生成多个html文件的时候,我们希望各自引入各自的js文件,那么如何操作呢?

比如说我们希望**index.html**引入的是**index-bundle.js**， **index2.html**引入的是**index2-bundle.js**如何操作呢?

我们需要在html-webpack-plugin中再配置一个参数,chunks,支持数组,数组里面填写的是引入的js,也就是entry里面配置的key,要引入哪个js就配置entry中的哪个key.

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry:{ index: './src/index.js', index2: './src/index2.js' }, output:{ path:path.resolve(__dirname,'dist'), //filename前面我们可以使用一个变量[name],这个就表示获取entry里面的key作为文件名加在前面 //打出来是index-bundle.js //和index2-bundle.js filename:'[name]-bundle.js' }, plugins:[ new HtmlWebpackPlugin({ chunks:['index'], //添加引入的js,也就是entry中的key filename:'index.html', minify:{ collapseWhitespace:true //折叠空白区域 也就是压缩代码 }, hash:true, title:'I love China', template: './src/index.html' //模板地址 }), new HtmlWebpackPlugin({ chunks:['index2'], //添加引入的js,也就是entry中的key filename:'index2.html', minify:{ collapseWhitespace:true //折叠空白区域 也就是压缩代码 }, hash:true, title:'第二个页面', template: './src/index2.html' //模板地址 }) ] }

这个时候我们在执行npm run build,index.html和index2.html分别引入了自己的js文件