102 lines
3.4 KiB
Markdown
102 lines
3.4 KiB
Markdown
---
|
|
title: webpack(3)-补充
|
|
date: 2018-6-10 18:29:17
|
|
tags:
|
|
- webpack
|
|
categories:
|
|
- 前端杂烩
|
|
---
|
|
|
|
#### 文件变更监控
|
|
在开发过程中通常需要对代码进行频繁的修改
|
|
并且同时查看效果
|
|
在webpack命令加入`--watch`参数可以启动一个进程执行文件的监控
|
|
如果文件发生改变会自动再次执行打包
|
|
比如
|
|
```bash
|
|
webpack hello.js bundle.js --watch
|
|
```
|
|
<!-- more -->
|
|
#### 分装打包
|
|
对于不同的功能模块 , 如果我们不希望将其打包在一起 , 可以去指定多个入口文件
|
|
```javascript
|
|
//...
|
|
entry: {
|
|
bundle1 : './src/entry.js',
|
|
bundle2 : "./src/entry2.js"
|
|
},
|
|
output: {
|
|
path: __dirname+"/dist",
|
|
filename: '[name].js'
|
|
},
|
|
// ...
|
|
```
|
|
为了避免打包后输出的目标文件互相覆盖 , 我们需要对打包后的目标文件名进行动态命名
|
|
`[name]` 代表以入口文件的名称命名 , 例如上面的配置打包之后获得的就是 bundle1.js和 bundle2.js两个文件
|
|
`[chunkhash]`代表文件模块快照的hash值进行命名 , 例如bundle.[chunkhash].js
|
|
|
|
> 如果**只是**使用`[hash]`则不会进行分装打包 , 最终的结果还是一个文件
|
|
|
|
---
|
|
### 使用插件
|
|
webpack提供了丰富的扩展机制 , 除了各种加载器之外 , 还有就是插件
|
|
我们可以使用丰富的第三方插件扩展webpack的功能
|
|
#### html-webpack-plugin
|
|
这是一个html文件的自动生成插件
|
|
在打包当中 , 如果在文件命名当中加入了hash值 , 那么每次打包产生的文件名都会不同
|
|
如果要每次都去复制文件名 , 然后手动修改html文件就太过繁琐了 , 而且也容易出错
|
|
这个插件的作用就是自动完成这件事
|
|
首先是安装
|
|
```bash
|
|
npm install html-webpack-plugin --save-dev
|
|
```
|
|
简单应用一下
|
|
在webpack.config.js当中
|
|
```javascript
|
|
var HtmlWebpackPlugin = require("html-webpack-plugin");
|
|
|
|
module.exports = {
|
|
//(其他配置项)...
|
|
plugins : [
|
|
new HtmlWebpackPlugin()
|
|
]
|
|
};
|
|
```
|
|
这种情况下使用的是插件的默认配置项 , 会在目标文件目录下生成一个index.html文件
|
|
这个文件中自动引入了打包产生的若干js文件
|
|
|
|
但是在实际的应用当中 , 这个html文件通常需要复杂得多 , 我们需要指定一个预定义的模板
|
|
```javascript
|
|
//....
|
|
new HtmlWebpackPlugin({
|
|
filename : "assert/index.html" //文件输出的路径
|
|
template : "template.html"
|
|
})
|
|
```
|
|
其他常用参数
|
|
+ inject : 可以取值 true | "body" | "head" | false , 代表js是否被引入到页面中 , 以及放在body底部还是在head当中
|
|
+ title : 页面的标题
|
|
+ favicon : 页面的图标文件
|
|
+ chunks : 需要引入的模块名称 , 使用数组形式 , 比如["entity1", "entity2"]
|
|
+ excludeChunks : 需要排除掉的模块名称 , 与chunks的格式一样 , 使用数组形式
|
|
+ minify : 是否对生成的html文件内容进行压缩 , 包含许多子选项 , 可以参考[官方文档](https://github.com/kangax/html-minifier#options-quick-reference)
|
|
|
|
|
|
##### 模板语法
|
|
html-webpack-plugin使用了ejs的模板语法
|
|
也就是在模板当中使用`<%= %>`可以引用变量
|
|
例如在配置参数中自定义的属性
|
|
```javascript
|
|
new HtmlWebpackPlugin({
|
|
title : "My App",
|
|
filename : "assert/index.html",
|
|
template : "test.html",
|
|
inject : "head",
|
|
now : new Date()
|
|
})
|
|
```
|
|
在模板当中可以以如下方式使用
|
|
```
|
|
<p><%=htmlWebpackPlugin.options.now %></p>
|
|
```
|