目錄

• 一、什麼是Webpack
• 二、Webpack安裝
  • 1、全域性安裝
  • 2、安裝後檢視版本號
• 三、建立專案
  • 1、初始化專案
  • 2、建立src資料夾
  • 3、src下建立common.js
  • 4、src下建立utils.js
  • 5、src下建立main.js
• 四、JS打包
  • 1、建立配置檔案
  • 2、執行編譯命令
  • 3、建立入口頁面
  • 4、測試
• 五、CSS打包
  • 1、安裝外掛
  • 2、修改webpack.config.js
  • 3、在src資料夾建立style.css
  • 4、修改main.js
  • 5、執行編譯命令
  • 6、測試

一、什麼是Webpack

Webpack 是一個前端資源載入/打包工具。它將根據模組的依賴關係進行靜態分析，然後將這些模組按照指定的規則生成對應的靜態資源。

從圖中我們可以看出，Webpack 可以將多種靜態資源 js、css、less 轉換成一個靜態檔案，減少了頁面的請求。

二、Webpack安裝

1、全域性安裝

npm install -g webpack webpack-cli
或
npm install -g webpack
npm install -g webpack-cli

2、安裝後檢視版本號

webpack -v

三、建立專案

建立 webpack_pro資料夾

1、初始化專案

進入目錄，執行命令

npm init -y

2、建立src資料夾

3、src下建立common.js

這裡使用的是CommonJS模組化方式，這種方式不支援ES6的語法，所以不需要Babel轉碼

exports.info = function (str) {
    document.write(str)
}

4、src下建立utils.js

exports.add = function (a, b) {
    return a + b
}

5、src下建立main.js

const common = require('./common')
const utils = require('./utils')

common.info('Hello world!' + utils.add(100, 200))

四、JS打包

1、建立配置檔案

webpack_pro目錄下建立配置檔案webpack.config.js

以下配置的意思是：

• 讀取當前專案目錄下src資料夾中的main.js（入口檔案）內容，分析資源依賴，把相關的js檔案打包
• 打包後的檔案放入當前目錄的dist資料夾下
• 打包後的js檔名為bundle.js

const path = require("path") //Node.js內建模組
module.exports = {
    entry: './src/main.js', //配置入口檔案
    output: {
        path: path.resolve(__dirname, './dist'), //輸出路徑，__dirname：當前檔案所在路徑
        filename: 'bundle.js' //輸出檔案
    }
}

2、執行編譯命令

webpack --mode=development
#執行後檢視bundle.js 裡面包含了上面兩個js檔案的內容並進行了程式碼打包

也可以配置專案的npm執行命令，修改package.json檔案

"scripts": {
    //...,
    "dev": "webpack --mode=development",
    "prod": "webpack --mode=production"
 }

執行npm命令執行打包

npm run dev #開發打包
或
npm run prod #生產打包

3、建立入口頁面

webpack_pro目錄下建立index.html，引用bundle.js

<script src="dist/bundle.js"></script>

4、測試

瀏覽器中檢視index.html

五、CSS打包

1、安裝外掛

Webpack 本身只能處理 JavaScript 模組，如果要處理其他型別的檔案，就需要使用 loader 進行轉換

Loader 可以理解為是模組和資源的轉換器。

首先我們需要安裝相關Loader外掛，css-loader 是將 css 裝載到 javascript；style-loader 是讓 javascript 認識css

npm install -D style-loader css-loader 

2、修改webpack.config.js

const path = require("path"); //Node.js內建模組
module.exports = {
    //...,
    output:{
        //其他配置
    },
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包規則應用到以css結尾的檔案上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

3、在src資料夾建立style.css

body{
    background:pink;
}

4、修改main.js

在第一行引入style.css

require('./style.css')

5、執行編譯命令

npm run dev

6、測試

瀏覽器中檢視index.html，看看背景是不是變成粉色啦？