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

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

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

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

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

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

在src下创建一个文件

('welcome suzhou');

创建文件

const path = require('path');

 = {
    entry:'./src/',
    output:{
        path:(__dirname,'dist'),
        filename:'' // 表示输出的js文件名
    }
}

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

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

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

('welcome Strive');

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

const path = require('path');

 = {
    entry:['./src/','./src/'],
    output:{
        path:(__dirname,'dist'),
        filename:'' //名字可以随便起
    }
};

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

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

我们继续来编写

const path = require('path');

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

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

如何使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.安装成功以后,在里面引入

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

3.在里面的plugins里面配置插件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
 = {
    entry:{
        index: './src/',
        index2: './src/'
    }, 
    output:{
        path:(__dirname,'dist'),
        //filename前面我们可以使用一个变量[name],这个就表示获取entry里面的key作为文件名加在前面
        //打出来是
        //和
        filename:'[name]-' 
    },
    plugins:[
        new HtmlWebpackPlugin()
    ]
}

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

我们发现自动创建了dist目录,里面有,,目录,并且自动引入了,文件.

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

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

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

 = {
    entry:{
        index: './src/',
        index2: './src/'
    }, 
    output:{
        path:(__dirname,'dist'),
        //filename前面我们可以使用一个变量[name],这个就表示获取entry里面的key作为文件名加在前面
        //打出来是
        //和
        filename:'[name]-' 
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: './src/' //模板地址

        })
    ]
}

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

自动配置页面title

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

<title><%= %></title>

// 模板
<!DOCTYPE html>
<html>
<head>
    <title><%= %></title>
</head>
<body>
    <div ></div>
</body>
</html>

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

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

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

 = {
    entry:{
        index: './src/',
        index2: './src/'
    }, 
    output:{
        path:(__dirname,'dist'),
        //filename前面我们可以使用一个变量[name],这个就表示获取entry里面的key作为文件名加在前面
        //打出来是
        //和
        filename:'[name]-' 
    },
    plugins:[
        new HtmlWebpackPlugin({
            hash:true, //向html引入的src链接后面增加一段hash值,消除缓存
            title:'I love China',
            template: './src/' //模板地址
        })
    ]
}

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

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

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

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

多个HTML模板区分输出配置

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

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

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

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

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

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

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

比如说我们希望引入的是，引入的是如何操作呢?

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

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

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

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

秒客网

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

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

相关文章

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

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

相关文章

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