03webpack的Html插件
插件
webpack-dev-server插件
- 安装webpack-dev-server
npm install webpack-dev-server -D - 运行webpack-dev-server
npx webpack-dev-server
该命令不会真的会去打包文件，只是把这种文件写到内存中（内存中的打包） - 开发服务器配置（在webpack.config.js中配置）
devServer: { // 开发服务器的配置
port: 3000, // 端口
progress: true, // 在内存打包时候看到进度条
contentBase: './build', // 找到当前的文件夹
compress: true
},
- 通过配置package.json文件运行
用npm run build执行打包了，npm run dev直接运行
"scripts": {
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server"
},
webpack-dev-server详细配置
devServer: { // 开发服务器的配置
port: 3000, // 指定要监听请求的端口号
progress: true, // 在内存打包时候看到进度条
contentBase: path.join(__dirname, ",/build"), // 默认情况下，将使用当前工作目录作为提供内容的目录，但是你可以修改为其他目录
// [path.join(__dirname, "public"), path.join(__dirname, "assets")]
compress: true, // 启用gzip 压缩
clientLogLevel: "info", // 可能的值有 none, error, warning 或者 info（默认值）
headers: { // 在所有请求中添加首部内容：
"X-Custom-Foo": "bar"
},
lazy: true,//当启用 lazy 时，dev-server 只有在请求时才编译包(bundle)
filename: "bundle.js",//在惰性模式中，此选项可减少编译。 默认在惰性模式，每个请求结果都会产生全新的编译
headers: { // 在所有请求中添加首部内容：
"X-Custom-Foo": "bar"
},
historyApiFallback: {Boolean|Object},
host: "127.0.0.1" //指定使用一个 host。默认是 localhost
hot: {Boolean}, //启用 webpack 的模块热替换特性,
hotOnly: {Boolean},
https: {Boolean}, //默认情况下，dev-server 通过 HTTP 提供服务。也可以选择带有 HTTPS 的 HTTP/2 提供服务
inline: {Boolean}, //在 dev-server 的两种不同模式之间切换。默认情况下，应用程序启用内联模式(inline mode)
noInfo: {Boolean},//启用 noInfo 后，诸如「启动时和每次保存之后，那些显示的 webpack 包(bundle)信息」的消息将被隐藏。错误和警告仍然会显示
proxy: {object},//
public: {string},//
publicPath: {string},//
quiet: {Boolean},//启用 quiet 后，除了初始启动信息之外的任何内容都不会被打印到控制台。这也意味着来自 webpack 的错误或警告在控制台不可见
setup: {function},//
staticOptions: {object},//
stats: {string|object}.//允许你精确控制 bundle 信息展示
watchContentBase: {Boolean},//告诉服务器监视那些通过 devServer.contentBase 选项提供的文件。文件改动将触发整个页面重新加载,默认被禁
watchOptions: {object},//
}
详细配置和说明参考：https://www.html.cn/doc/webpack2/configuration/dev-server/
HTML插件
将html文件的index文件生成在build目录下
- 在src目录中创建index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自学webpack</title>
</head>
<body>
<!-- 模板 -->
</body>
</html>
- 安装html-webpack-plugin
npm install html-webpack-plugin -D - 在webpack中引用html-webpack-plugin插件
let HtmlWebpackPlugin = require("html-webpack-plugin"); - 在webpack.config.js中配置配置相应的参数
plugins:[ // 数组 放着所有的插件
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
// 压缩HTML代码
minify: {
removeAttributeQuotes: true, //去掉双引号
collapseWhitespace: true, //移除空格，将html打印成一行
removeComments: true //移除注释
},
hash: true // 为了解决缓存的问题，添加哈希戳
})
]
html-webpack-plugin详细配置
this.options = _.extend({
template: path.join(__dirname, 'default_index.ejs'),
templateParameters: templateParametersGenerator,
filename: 'index.html',
hash: false,
inject: true,
compile: true,
favicon: false,
minify: false,
cache: true,
showErrors: true,
chunks: 'all',
excludeChunks: [],
chunksSortMode: 'auto',
meta: {},
title: 'Webpack App',
xhtml: false
}, options);
简单介绍各个含义：
title：{String} 用来生成页面的 title 元素
template：{String} 源模板文件
inject：{Boolean|String} 放置js资源。true || 'head' || 'body' || false,如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。false则不会引入。
hash:{Boolean} 将添加一个唯一的 webpack 编译 hash 到所有包含的脚本和 CSS 文件，对于解除 cache 很有用
favicon:{String} 添加特定的 favicon 路径到输出的 HTML 文件中
cache:{Boolean} 只有文件修改后才会重新打包文件
minify：{Boolean|Object} true if mode is 'production', otherwise false,
{
collapseWhitespace: true,//是否去除html中的空格、换行符,元素内的不会去除的
removeComments: true,//是否去除html注释
removeRedundantAttributes: true,//
removeScriptTypeAttributes: true,//去掉script标签的type属性
removeStyleLinkTypeAttributes: true,//去掉style和link标签的type属性
useShortDoctype: true//
}
砥砺前行
