进阶webpack

分手后的思念是犯贱 2022-10-01 00:54 205阅读 0赞

在[初识webpack][webpack] 中提到了webpack的基本配置和使用，接下来将进一步学习webpack在项目中的使用。

## 一.webpack生成简单的HTML页面 ##

前面提到将需要打包的js文件打包成bundle.js后，需要在index.html中引入

![20170324140000866][]

此时如果我们将bundle.js换成a.js呢，也就是改变打包后输出文件的名称，那么只有一个办法，那就是到index.html中手动修改script便签的src属性值，那么如果生成的是多个呢，岂不是每添一个输出都要手动在页面中引入一个js，这样就给我们带来了相当大的工作量，有没有好的办法解决呢，npm为我们提供了一个贴心的插件——html-webpack-plugin

首先，通过命令行安装html-webpack-plugin，使用命令  npm install html-webpack-plugin

![20170324141001594][]

安装完成后，我们再来看输出多个js打包文件的情况

![20170324141659728][]

好此时我们运行webpack

![20170324141824026][]

生成两个打包后的js文件main.js和a.js，以及新的index.html文件

![20170324142354612][]

打开新生成的index.html文件

![20170324142704396][]

插件的其他属性介绍

![20170324144315980][]

## 二.参数传递 ##

下面有这样的需求，加入我们需要将一些参数在config文件中定义，并且需要将其通过html-webpack-plugin插件传递，怎么操作呢

![20170324145406640][]

运行webpack后得到a.html，我们打开来看

![20170324150111770][]

那么html-webpack-plugin可以设置和传递那些参数呢

参考——[html-webpack-plugin插件文档][html-webpack-plugin]

那么我们项目需要上线时如何操作呢

![20170324195613261][]

minify文档地址——[点击打开链接][Link 1]

## 三.webpack处理多页面应用 ##

以上两部分都是在介绍生成单页面并自动引入打包文件的，那么生成多页面的并且给不同的页面引入不同的打包文件如何实现呢

还是从配置文件下手，假设要生成页面a，b，c，同时需要的打包的js文件也有a，b，c

![20170324203408688][]

这样来实现

var htmlWebpackPlugin=require('html-webpack-plugin');
    module.exports={
    	entry:{
    		main:'./src/script/main.js',
    		a:'./src/script/a.js',
    		b:'./src/script/b.js',
    		c:'./src/script/c.js'
    	},
    	output:{
    		path:'/webpackDemo/dist',
    		filename:'js/[name].js',
    		publicPath:'http://cdn.com'
    		
    	},
    	plugins:[
    	  new htmlWebpackPlugin({
    	  	filename:'a.html',
    	  	template:'index.html',
    	  	inject:'head',
    	  	title:"this is a",
    	  	chunks:['main','a']
    	   }),
    	   new htmlWebpackPlugin({
    	  	filename:'b.html',
    	  	template:'index.html',
    	  	inject:'head',
    	  	title:"this is b",
    	  	chunks:['b']
    	   }),
    	   new htmlWebpackPlugin({
    	  	filename:'c.html',
    	  	template:'index.html',
    	  	inject:'head',
    	  	title:"this is c",
    	  	chunks:['c']
    	   })
    	]
    }

三个html好实现，无非就是三个new htmlWebpackPlugin()，那么给三个html文件分别引入不同的打包文件如何实现呢，用chunks，具体使用方法参照程序。

[webpack]: http://blog.csdn.net/u013344815/article/details/65440897
[20170324140000866]: /images/20220705/1c5efc9e27b24f76bc1da325c0031659.png
[20170324141001594]: /images/20220705/1643fe34f2554bba84598510e8b2ddb2.png
[20170324141659728]: /images/20220705/d6b1e0e4df3943bdbe05177dc8d12316.png
[20170324141824026]: /images/20220705/0f9a146de9524e90b4ee2c50b1474e87.png
[20170324142354612]: /images/20220705/427f7c26a1074de5b6ea83bdf7195b4b.png
[20170324142704396]: /images/20220705/1b8a7225e7874ab0b3812db6e29b03f8.png
[20170324144315980]: /images/20220705/fced2b0b98834f1ab1cb29d1bac858f6.png
[20170324145406640]: /images/20220705/df13361b3ffe4afd895c73d72e5e4270.png
[20170324150111770]: /images/20220705/7a5f6db9c8cb4becb8765b4e3c80ac1d.png
[html-webpack-plugin]: https://www.npmjs.com/package/html-webpack-plugin
[20170324195613261]: /images/20220705/003a0e8dde69425cb34c818863e0c0fa.png
[Link 1]: https://github.com/kangax/html-minifier#options-quick-reference
[20170324203408688]: /images/20220705/8d7924d097374b13be1c358c88cbaaf6.png