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

其他 2018-06-20 15:49:41 阅读次数: 2

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 [email protected] -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里面配置插件

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()
    ]
}

这时我们就可以执行 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模板文件

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({
            template: './src/index.html' //模板地址

        })
    ]
}

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

自动配置页面title

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

<title><%= htmlWebpackPlugin.options.title%></title>

- 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值

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({
            hash:true, //向html引入的src链接后面增加一段hash值,消除缓存
            title:'I love China',
            template: './src/index.html' //模板地址
        })
    ]
}

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

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

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({
            minify:{
                collapseWhitespace:true //折叠空白区域 也就是压缩代码
            },
            hash:true,
            title:'I love China',
            template: './src/index.html' //模板地址
        })
    ]
}

多个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文件


猜你喜欢

转载自blog.csdn.net/xyphf/article/details/79824777
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022