webpack4系列教材-入門3

前情回顧

上節(jié)我們使用到HtmlWebpackPlugin來按模板生成index.html并自動(dòng)引入打包js

本節(jié)要點(diǎn)

1. 使用CleanWebpackPlugin插件
2. 使用webpack-dev-server

CleanWebpackPlugin

CleanWebpackPlugin顧名思義是一款處理打包生成前的清理插件

webpack-dev-server

這是一款webpck開發(fā)服務(wù)器，可以達(dá)實(shí)現(xiàn)自動(dòng)編譯刷新瀏覽器，從而提升開發(fā)效率

立即開始

首先引入依賴

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', //當(dāng)前模式為生產(chǎn)模式
    /**
     * 入口配置
     */
    entry: './main.js', //入口文件
    /**
     * 開發(fā)服務(wù)器
     */
    devServer: {
      port:8888,
      contentBase:path.join(__dirname,'public')
    },
    /**
     * 輸出配置
     */
    output: {
      filename: 'bundle.[hash].js', //輸出文件名新增hash值
      path:path.resolve(__dirname,'dist')  //__dirname在node.js中為全局變量,表示當(dāng)前根目錄
    },
    /**
     * 插件配置
     */
    plugins:[
      //清理生成目錄
      new CleanWebpackPlugin(),
      //HTMLWebpackPlugin簡單配置
      new HTMLWebpackPlugin({ 
        title:'這個(gè)是自動(dòng)生成的喔',
        template: path.resolve(__dirname,'public','index.html')
      })
    ]
}

在packgae.json “scripts”中新增

"dev": "webpack-dev-server --open --color"

--open 是自動(dòng)打開系統(tǒng)的瀏覽器，
--color 輸出的時(shí)候帶顏色
更多配置可以參考文檔

項(xiàng)目目錄

-w280

立馬執(zhí)行吧

yarn run start

不管你執(zhí)行多少遍，哇哈哈哈。在dist目錄只會(huì)存在兩個(gè)文件，這樣子就達(dá)到我們的目的，真棒！

一開始我們就說到webpack-dev-server開發(fā)，其實(shí)在上面的webpack.config.js已經(jīng)配置完畢

我們?cè)诮K端執(zhí)行剛剛新增的dev腳本

yarn add dev

沒有意外的話
在終端會(huì)打印

-w719

document.write('<h1>hello webpack</h1>')
document.write('<h1>熱更新啦</h1>'+new Date().getMilliseconds())

-w970

結(jié)束啦

今天的教程就到此為止，通過CleanWebpackPlugin可以清理輸出目錄的產(chǎn)生的文件，通過webpack-dev-server可以提升開發(fā)效率