您的位置：首页 > Web前端 > HTML

webpack学习笔记————配置Html插件

2019-02-28 17:07 741 查看

上一篇简单介绍了webpack的基础配置，将js打包到dist目录下生成main.js,这一篇将介绍关于Html的插件

首先安装webpack自带的webpack-dev-server服务器，方便之后的项目的运行

npm install webpack-dev-server

接着可以使用npx webpack-dev-server来启动项目，但是通常来说我们更喜欢这样做，在package.json中添加如下代码：

"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 172.20.10.6",
"start": "npm run dev"
}

然后运行

npm run dev

或

npm start

接下来就可以通过ip+端口来访问你的页面了

解释一下几个参数，其中：

dev-server 有两种不同模式（inline mode、iframe 模式），默认情况下，应用程序启用内联模式(inline mode)
progress 将运行进度输出到控制台
host 指定使用一个 host。默认是 localhost，这里我写的是自己电脑的ip，这样你就能通过ip+端口来访问了，如果你想在移动端调试你的代码，可以在草料二维码中，将自己的ip及端口生成二维码，然后手机扫码就可以了，注意要在同一个局域网下。

上面的部分都是基于默认的配置，接下来我们进行具体的配置

在webpack配置文件webpack.config.js中，在moudle.exports里加如如下的配置：

devServer: {
hot: true,//启用 webpack 的模块热替换特性
port:3000,
progress:true,
contentBase:'./build',//默认情况下，将使用当前工作目录作为提供内容的目录，但是你可以修改为其他目录：如build
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,//一切服务都启用gzip 压缩：可以不用配置
open: true,//服务启动后自动打开浏览器
publicPath: config.dev.assetsPublicPath,

},

更多的配置请参见官网：webpack-dev-server

Html 插件

首先，我们现在src目录下新建一个html模板，具体如下：

index.html
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--模板-->
</body>
</html>

npm 安装插件

npm  install html-webpack-plugin

在配置文件中引入：

const HtmlWebpackPlugin = require('html-webpack-plugin')

在配置文件的moudle.exports中加如下配置：

plugins: [//数组，放着所有的插件
new HtmlWebpackPlugin({
filename: 'index.html',//打包后的文件名
template: './src/index.html',//模板html
minify: {//生产环境，压缩html，
removeAttributeQuotes: true, //去除双引号
collapseWhitespace: true //折叠空行，代码变成一行
},
})
hash:true //给html引用外部文件时加上hash
]

运行npm run build打包，打包后的html会出现在bound文件夹下，index.html。

其实在output的配置中也可以加上hash，[hash:8]表示8位的hash

output: {
filename: "bundle.[hash:8].js",//打包后的文件名
path: path.resolve(__dirname, 'build')  //路劲必须是一个绝对路劲,_dirname指当前目录下的dist目录
},

关于html插件的具体用法请参考：官方文档：https://www.webpackjs.com/plugins/html-webpack-plugin/

备注：本文是学习珠峰培训的webpack课程的学习笔记，后面会接着更新，相关的视频课程资源请见：webpack4.0视频教程：https://download.csdn.net/download/qq_39040042/10968119
各位，一起加油，good luck！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航