webpack中html-webpack-plugin插件的使用(生成多个html页面,引入不同的js文件)

以html-webpack-plugin插件为例

1、先安装插件,在命令行中输入:npm  i -D html-webpack-plugin(执行完之后,在package.js的devDependencies中就多了下面的代码

"html-webpack-plugin": "^3.2.0"
即安装了html-webpack-plugin插件

2、在配置文件中让插件生效,在module.exports={}对象中加入一个plugins字段,这个字段接收一个数组,也就意味着,可以给webpack应用很多各种各样的插件

  • 先将插件引进来:
const HtmlWebpackPlugin = require('html-webpack-plugin');
  • 由于插件可以携带参数/选项,你必须在 webpack 配置中,向 plugins 属性传入 new 实例。
plugins:[
        new HtmlWebpackPlugin()//注意后面不要加分号,否则执行会出错
    ]
  • 运行npm  run dev 在dist中会自动生成一个index.html文件,并且这个html中自动引入了main.js(注意:这里的dev和main.js都是我们之前配置好的,根据你自己的设定可以不同,如果,还有疑问,可以看我之前写过的文章
https://mp.csdn.net/postedit/80213261),代码如下所示
<script type="text/javascript" src="main.js"></script>

如果我们有自己的html文件,里面已经有一些写好的结构,想要在这个文件的基础上加载打包后的main.js,我们只需要在配置里面指定一个参数(是一个对象),这个对象里面可以包含两个属性filename和template

  1. filename:指定当我们打包好之后,新建的html文件的名字叫什么,如果不写的话,默认生成的是index.html
  2. template:指定以哪个html为模板去创建
 plugins:[
        new HtmlWebpackPlugin({
            filename:'first.html',//打包好后,新建的html名字为first.html
            template:'./src/index.html'//以src下面的index.html为模板去创建新的html文件
        })
    ]

打包好之后,在dist文件中就会自动生成一个first.html文件,并且,这个html文件中包含了index.html中的结构,并且,也会自动引入main.js文件

OK,就先写这么多,持续更新中……

更新:

html压缩输出:在插件配置文件中加入:minify;{

   collapseWhitespace:true,//压缩空白

   removeAttributeQuotes:true//删除属性双引号

}

生成链接消除缓存:

  在插件配置文件中加入hash(bool):hash:true

在生成的html文件中加入自己的title:首先在插件配置文件中加入title:"名字",然后一定要记得在模板的title中加入下面的代码

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

想要生成多个html页面:filename,这个上面我们已经说到过,filename可以指定生成html文件的名字,那么这也就可以用来区分我们要生成的html页面,否则默认情况下生成的都是index.html,那么自然也就无法生成多个页面了,用法上面已经讲过了,就不再重复说了(注意,想要生成多个html页面,就要调用多次插件)

想要在生成的不同的html页面中引入不同的js文件,怎么做?很简单,只要在插件配置文件中加入:chunks:["入口文件名"],即可,如果不加的话,会在生成的html页面中引入所有的入口文件哦

看完整webpack配置文件代码(下面的是生成多个页面,引入不同的js文件)

webpack.config.js中的代码

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:{//入口文件
        one:"./src/index.js",
        two:"./src/main.js"
    },
    output:{//输出的文件
        path:path.resolve(__dirname,'dist'),
        filename:'[name].boundle.js'
    },
    mode:"development",
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/one.html',
            filename:'one.html',//生成的html页面的名字为one.html
            title:"one",//它的title为one,记得要在src/one.html中加入<%= %>
            hash:true,
            chunks:['one']
        }),
        new HtmlWebpackPlugin({
            template:'./src/two.html',
            filename:'two.html',
            title:"two",
            hash:true,
            chunks:['two']
        })
    ]
}

因为涉及到title的变化,所以也把两个模板html中的代码贴出来

one.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div>hello one</div>
</body>
</html>

two.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div>hello two</div>
</body>
</html>
嗯、是不是超级简单,其实这些在webpack的官网上都可以找到,附上链接,有兴趣的可以看看哦,而且官网巨详细滴

再稍微提一个,删除文件的插件吧,这个很简单,我就把步骤写一下,不做详细的扩展

插件:clean-webpack-plugin

1、下载:npm i -D clean-webpack-plugin

2、引入:在配置文件中引入,和上面的引入方式一样;const CleanWebpackPlugin = require('clean-webpack-plugin')

3、使用:new CleanWebpackPlugin(['dist'])//代表删除dist这个文件夹,当然也可以是其他的,很简单就不再说了

其实,插件嘛,只要一个会用了,其它的也就简单了,所以也就不再多提什么了,如果我觉得有必要的话,还会再写的

还有就是打字有点快,可能有的地方不小心打错了,还请大家海涵,如果发现并提出来那就更好了,还有一种可能,就是打的都对(哈哈),不过也不介意提出别的关于技术的意见,什么都行滴,互相学习互相进步

猜你喜欢

转载自blog.csdn.net/lhjuejiang/article/details/80216020

相关文章