html-webpack-plugin
devServer时,
- 根据模板在内存中 ( express项目根目录下) 生成html文件(类似于devServer生成内存中的bundle.js)
- 自动引入bundle.js ---模板文件修改时, 输出的html也会随之修改, 但不会自动刷新
打包时, 自动生成index.html(html中自动引入bundle.js)
基本配置
安装: npm i html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'template.html'
})
]
多页应用的配置
多页应用的打包配置需要拷贝多份插件，用于生成两个html页面，实现多页应用
option配置项
-
title生成的html标题 -
filename生成的html文件名，默认为index.html。 -
template当webpack自动生成html文件时，会基于某个模板来进行。当然你也可以自定义自己的模板，如果没有定义webpack会使用默认的模板。但是需要指出的是，当你使用了其他模板类型（比如jade），那么你需要安装对应的loader。默认情况下webpack使用ejs模板。 -
inject设置将js和css文件插入在html的哪个位置（js的加载是同步进行的，它的位置会影响网页的加载速度）。inject共有四个可选项：true、body、head和false。true(bool类型)：默认值，将js文件插入body的底部。设置如下：
new HtmlWebpackPlugin({ inject: true }),body(string类型)：和true的功能相同。设置如下：
new HtmlWebpackPlugin({ inject: 'body' }),head(string类型)：将js文件插入在head标签内。false(bool类型)：表示不插入生成的js文件，也不插入css文件。因为其他三个可选项css文件都是插入在head标签内的。
-
minify(object|false)是对生成的html文件进行压缩。默认是false，表示不对html文件进行压缩。如果赋值为object，用于对压缩方式进行配置，器配置项可以参考html-minifier。 -
hash是否为插入的js和css文件添加hash值，默认为false。
为文件添加hash对于文件缓存是很有帮助的，因为该hash值只有对应的文件发生改变的时候才会改变，当浏览器发现文件名没有改变的时候是不会重新请求文件的，而是从缓存里面去拿。
chunks大多数情况下Webpack的entry会有多个入口文件：
entry: {
vendor: Object.keys(pkg.dependencies),
main: __dirname + '/app/main.js'
},
这时，webpack在编译的时候会生成多个js文件（main.js/vendor.js），默认情况下会在html中添加所有的js和css文件。但有时我们并不想将多有的文件插入到生成的html中，而是有选择的添加我们需要的，这个时候就可以通过chunks来进行配置。 例如，我们只想添加main.js/main.css，那么配置如下：
plugins: [
new HtmlWebpackPlugin({
chunks:['main']
})
]
这时，生成的html就会只包含main.js和main.css。
excludeChunks刚好和chunks相反，它表示不添加哪些js/css文件。
HtmlWebpackPlugin结合其扩展插件inline-chunk-manifest-html-webpack-plugin
It allows you to embed javascript and css source inline.
var HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
plugins: [
new HtmlWebpackPlugin({
inlineSource: '.(js|css)$' // embed all javascript and css inline
}),
new HtmlWebpackInlineSourcePlugin()
]
webpack 源码 ing
process.cwd() & __dirname
-
process.cwd(): 当前执行node命令时的文件夹地址 ——工作目录，保证了文件在不同的目录下执行时，路径始终不变 -
__dirname: 被执行的
js文件的地址 ——文件所在目录
Nodejs官方文档上的解释：
=> process.cwd(): The process.cwd() method returns the current working directory of the Node.js process.
意思很明了啦，就是说process.cwd()返回的是当前Node.js进程执行时的工作目录
那么来看看__dirname的官方解释：
=> __dirname: 当前模块的目录名。 等同于 __filename 的 path.dirname()。__dirname 实际上不是一个全局变量，而是每个模块内部的
