---

前言

簡單的webpack搭建是一個前端的加分項，常用的vue框架就是以它為基礎搭建的

---

一、webpack是什麼？

webpack是靜態資源打包工具，前端必備的東西！！

二、webpack的作用

• 將JS依賴進行打包整合(通俗一點，就是打包檔案，一般專案上傳的都是打包好的檔案)
• 使一些預處理的sass，less可以在環境中進行編譯(就是讓你能在專案中使用sass，less)
• 可以對js、html、圖片等進行壓縮(專案優化)

三、核心

1. entry 入口檔案 ---------// 好比main.js
2. output 出口檔案 -------// 好比打包之後的資料夾(dist)
3. plugin 外掛 -------------// 自動生成html檔案等外掛
4. loader 轉換器 ---------// sass less 轉換成我們想要的檔案型別
5. dev-serve 伺服器 ----// 使我們webpack在本地執行服務(能啟動)
6. mode 模式 -------------// 可以切換開發環境 和 生成環境

四、使用步驟

①.基礎搭建+打包

1. 先建立一個空資料夾用來搭建專案，並檢測當前環境有沒有webpack(webpack -v,沒有就下唄！)
2. 在專案資料夾中，cmd開啟終端，並輸入

npm init -y//初始化一個package.json（此時生成一個package.json檔案）

3. 專案中建立一個src資料夾，裡面建立一個index.html ,給一個div並給一個id名，讓引入bundle.js（ps：這裡的bundle.js是打包後生成的檔案，固定的哦！先寫著，後面會用到）
   

4. src 中建立一個 main.js 作為主要開發檔案，在裡面進行dom操作，操作html中的#hmw,如下：
   

5. 此時打包檔案的話，在命令列(終端)輸入

webpack src/main.js --output dist/bundle.js

此時，會自動生成dist資料夾，幷包括了bundle.js檔案。為了正式操作，你還要把src中的index.html複製到dist中，如圖：
此時直接開啟dist中index.html即可看到頁面效果

6. 每次修改資料都要再次打包，輸入那麼長的命令，太麻煩，於是我們配置一下命令，簡化一下打包指令

與src同級建立一個webpack.config.js (通常用來配置webpack),內容如下：

const path = require("path")//引入webpack裡的配置
module.exports = {
    entry: "./src/main.js", //入口檔案
    output: { //出口檔案資訊
        filename: "bundle.js", //檔名
        path: path.resolve(__dirname, "dist") //dist應該是資料夾名
    },
}

ps：此時，命令列輸入webpack即可打包(和之前長的指令效果一樣)

②.使其能在本地啟動

完成上面操作後，要再本地啟動專案則需要

1. 命令列輸入(建立本地伺服器)： cnpm i webpack-dev-server -D
2. 在package.json中配置（“dev”: “webpack-dev-server --open --port 8888 --contentBase src --hot”），如下：

3.此時啟動專案(npm run dev)即可，如果報錯命令列輸入：

 cnpm i webpack@4.35.3 webpack-cli@3.3.5 -S

再啟動專案即可(ps:如果之前也有關於webpack-cli的報錯，也可輸入上方的命令解決，是由於webpack版本的問題)

再次ps：此時相當於有了一個熱啟動，操作dom時，頁面會跟新，不用再次打包

③.編譯sass

1. 命令列：cnpm i node-sass sass-loader style-loader css-loader -D
2. 在webpack.config.js 配置規則 (寫在module.exports={這裡！！！})

module: {
        rules: [
            //解析.scss檔案,對於用 import 或 require 引入的sass檔案進行載入，以及...宣告的內部樣式進行載入            
        {
          test: /.scss$/,
          use:['style-loader', 'css-loader', 'sass-loader']
        }
        ]
    }

3. 再在main.js裡引入import './css/index.scss’即可使用scss啦！！

④.自動生成html頁面

1. 先在命令列下載依賴 cnpm i html-webpack-plugin -D
2. 再在webpack.config.js中配置如下：

程式碼如下：

const htmlWebpackPlugin = require("html-webpack-plugin")

 // 外掛 直接生成html
    plugins: [
        new htmlWebpackPlugin({
            filename: "index.html",
            template: path.join(__dirname, 'index.html')
        })
    ],

3. 最後把src中的index.html放到與src同級的地方，再次打包即可自動生成dist檔案，包括bundle.js和index.html
   ps：練習時可以把之前的dist資料夾先刪掉，再打包

---

總結

只要邏輯弄明白，webpack並不難哦！完成後的專案越來越像vue腳手架了。你每次操作的都是與src同級的index.html（而不是dist裡的哦！），此時dist就只是一個打包檔案，每次改變資料的時候還是要再次打包，打包之後的html是不可操作的