webpack4系列教材-入门3
前情回顾
上节我们使用到HtmlWebpackPlugin来按模板生成index.html并自动引入打包js
本节要点
- 使用CleanWebpackPlugin插件
- 使用webpack-dev-server
CleanWebpackPlugin
CleanWebpackPlugin顾名思义是一款处理打包生成前的清理插件
webpack-dev-server
这是一款webpck开发服务器，可以达实现自动编译刷新浏览器，从而提升开发效率
立即开始
首先引入依赖
yarn add clean-webpack-plugin
yarn add webpack-dev-server
webpack.config.js配置
const path = require('path')
const HTMLWebpackPlugin = require("html-webpack-plugin")
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
module.exports = {
mode: 'production', //当前模式为生产模式
/**
* 入口配置
*/
entry: './main.js', //入口文件
/**
* 开发服务器
*/
devServer: {
port:8888,
contentBase:path.join(__dirname,'public')
},
/**
* 输出配置
*/
output: {
filename: 'bundle.[hash].js', //输出文件名新增hash值
path:path.resolve(__dirname,'dist') //__dirname在node.js中为全局变量,表示当前根目录
},
/**
* 插件配置
*/
plugins:[
//清理生成目录
new CleanWebpackPlugin(),
//HTMLWebpackPlugin简单配置
new HTMLWebpackPlugin({
title:'这个是自动生成的喔',
template: path.resolve(__dirname,'public','index.html')
})
]
}
在packgae.json “scripts”中新增
"dev": "webpack-dev-server --open --color"
--open 是自动打开系统的浏览器，
--color 输出的时候带颜色
更多配置可以参考文档
项目目录
-w280
立马执行吧
yarn run start
不管你执行多少遍，哇哈哈哈。在dist目录只会存在两个文件，这样子就达到我们的目的，真棒！
一开始我们就说到webpack-dev-server开发，其实在上面的webpack.config.js已经配置完毕
我们在终端执行刚刚新增的dev脚本
yarn add dev
没有意外的话
在终端会打印
-w719
然后就会自动打开浏览器。然后你在根目录下修改main.js,save之后，浏览器就自动更新了。
main.js
document.write('<h1>hello webpack</h1>')
document.write('<h1>热更新啦</h1>'+new Date().getMilliseconds())
-w970
结束啦
今天的教程就到此为止，通过CleanWebpackPlugin可以清理输出目录的产生的文件，通过webpack-dev-server可以提升开发效率
