blog-web/source/_posts/前端杂烩/webpack(3)-补充.md

title	date	tags	categories
webpack(3)-补充	2018-6-10 18:29:17	webpack	前端杂烩

文件变更监控

在开发过程中通常需要对代码进行频繁的修改 并且同时查看效果 在webpack命令加入--watch参数可以启动一个进程执行文件的监控 如果文件发生改变会自动再次执行打包 比如

webpack hello.js bundle.js --watch

分装打包

对于不同的功能模块 , 如果我们不希望将其打包在一起 , 可以去指定多个入口文件

//...
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文件就太过繁琐了 , 而且也容易出错 这个插件的作用就是自动完成这件事 首先是安装

npm install html-webpack-plugin --save-dev

简单应用一下 在webpack.config.js当中

var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
//(其他配置项)...
  plugins : [
    new HtmlWebpackPlugin()
  ]
};

这种情况下使用的是插件的默认配置项 , 会在目标文件目录下生成一个index.html文件 这个文件中自动引入了打包产生的若干js文件

但是在实际的应用当中 , 这个html文件通常需要复杂得多 , 我们需要指定一个预定义的模板

//....
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文件内容进行压缩 , 包含许多子选项 , 可以参考官方文档

模板语法

html-webpack-plugin使用了ejs的模板语法 也就是在模板当中使用<%= %>可以引用变量 例如在配置参数中自定义的属性

new HtmlWebpackPlugin({
  title : "My App",
  filename : "assert/index.html",
  template : "test.html",
  inject : "head",
  now : new Date()
})

在模板当中可以以如下方式使用

<p><%=htmlWebpackPlugin.options.now %></p>