# webpack4系列教材-入门3

webpack4系列教材-入门3

前情回顾

上节我们使用到HtmlWebpackPlugin来按模板生成index.html并自动引入打包js

本节要点

1. 使用CleanWebpackPlugin插件
2. 使用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('
hello webpack
')
document.write('
热更新啦
'+new Date().getMilliseconds())

-w970

结束啦

今天的教程就到此为止，通过CleanWebpackPlugin可以清理输出目录的产生的文件，通过webpack-dev-server可以提升开发效率