大家都知道，Vue 項(xiàng)目啟動后，在頁面里改了某個東西，瀏覽器會自動刷新，那是怎么實(shí)現(xiàn)的呢？帶著疑問，大家和我一起探討下。

第一步：創(chuàng)建一個 package.json 文件

npm init -y

運(yùn)行完默認(rèn)文件內(nèi)容如下：
{
  "name": "webpack.web",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

第二步：安裝 webpack webpack-cli

npm install -D webpack webpack-cli

webpack默認(rèn)會找 src 文件夾下的index.js文件作為入口文件，所以我們創(chuàng)建 src 文件夾，并在src 文件夾中創(chuàng)建index.js文件。
安裝和創(chuàng)建完成后，我們就可以測試打包了，運(yùn)行npx webpack，結(jié)果如下：

注意：我們不能全局安裝 webpack，以免影響其他的項(xiàng)目，使用 npx 命令運(yùn)行局部的 webpack 文件即可。

打包成功后，在項(xiàng)目目錄下多了個 dist 文件夾，里面有個 main.js 文件，如下：

有上述得知，在 webpack 中，入口文件 和 打包生成的文件及文件夾都有默認(rèn)配置，我們業(yè)可以手動配置。

配置打包文件

在 package.json 文件中，增加 "scripts" 如下：

"scripts": {
  "build": "webpack"
}

配置好后，我們再運(yùn)行npm run build就等同于npx webpack
說白了，就是在 "scripts"中給webpack 起了一個別名叫build，使用 npm run命令類似于npx 優(yōu)先使用局部的 webpack。

寫到這里是不是有點(diǎn)像Vue 項(xiàng)目打包時的樣子了，淡定，我們接著來。。。

第三步：創(chuàng)建 webpack.config.js 文件并配置

const path = require('path')
function resolve(dir){
    return path.resolve(__dirname, dir)
}

module.exports = {
    // 模式
    mode: 'production',
    // 入口
    // entry: './src/index.js', // 簡寫形式
    // entry: {
    //   main: './src/index.js' // main 名稱可以隨便起，比如 app
    // }, 
    entry: {
      main: resolve('src/index.js') // 最好寫成絕對路徑
    },
    // 出口
    output:{
        path: resolve('dist'), // 打包文件輸出的目錄
        filename: 'bundle.js'  // 輸出的文件的名稱
    },
    // 模塊加載器
    module:{
        rules:[

        ]
    },
    // 插件
    plugins:[

    ]
}

配置好后，運(yùn)行 npm run build 命令進(jìn)行重新打包
打包成功后，我們可以在 dist 文件夾中看到新打包的文件 bundle.js

這里有3個問題：

1. 重新打包后，并沒有清除之前的打包文件
2. 不能實(shí)現(xiàn)自動打包，類似于 Vue 的熱更新并沒有實(shí)現(xiàn)
3. 沒有把打包后的文件自動引入到 public/index.html 中

第四步：解決上述 3 問題

1. 安裝 webpack-dev-server 解決自動打包問題
2. 安裝 html-webpack-plugin 解決不能自動引入問題
3. 安裝 clean-webpack-plugin@1.0.1 解決不能清除文件問題
   安裝成功后，還需要在 packsge.json 文件中配置 "scripts"

"scripts": {
  "build": "webpack --mode production",
  "serve": "webpack-dev-server --mode development"
}

--mode 是指定運(yùn)行模式

配置 webpack.config.js 文件的 module 和 plugin

在文件頭部引入我們下載好的包

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpakPlugin = require('clean-webpack-plugin');

在webpack.config.js 文件中配置plugins

plugins:[
  new HtmlWebpackPlugin({
    // 默許指定 模板的路徑 否則會篡改網(wǎng)頁 title
    template: resolve('public/index.html')
  }),
  new CleanWebpakPlugin(['dist'])
]

配置好后，運(yùn)行命令npm run serve，結(jié)果如下：

寫到這里，是不是更像 Vue的 啟動命令了

也可以啟動后自動打開瀏覽器，需配置webpack.config.js 中的devServer
再次運(yùn)行啟動命令 npm run serve
哇哦，自動打開瀏覽器了?。?！

再測試更改頁面內(nèi)容
哇哦，自動打包了，頁面也自動刷新了（實(shí)現(xiàn)了模擬 Vue 熱更新）