一. 什么是Webpack
二. Webpack安裝
三. 案例：JS打包
- 1. 創建nodejs專案
- 2. 撰寫js檔案
- 3. 撰寫webpack.config.js
- 4. 打包
四. 案例：JS合并CSS
- 1. 安裝style-loader和css-loader
- 2. 修改webpack.config.js
- 3. 撰寫css檔案
- 4. 修改main.js
- 5、打包
- 6、打開瀏覽器測驗

一. 什么是Webpack

官網中文檔案：https://webpack.docschina.org/

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

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

二. Webpack安裝

# 全域安裝
npm install -g webpack webpack-cli

# 查看是否安裝成功
 webpack -v

三. 案例：JS打包

創建若干js和css檔案，然后分別用webpack進行打包

1. 創建nodejs專案

首先創建一個webpack空檔案夾，然后打開cmd，切換到當前目錄，輸入如下指令

npm init -y

2. 撰寫js檔案

在專案目錄下創建src檔案夾，在其中創建css和js檔案

out.js

exports.out = function (str) {
    console.log(str);
    document.write(str);
}

add.js

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

創建main.js：入口檔案，引入上述js檔案

//匯入out.js
const out = require("./out.js");
//匯入add.js
const add = require("./add.js");
out.out("hello" + add.add(1, 1));

3. 撰寫webpack.config.js

在專案目錄下創建組態檔webpack.config.js，用來配置打包

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

//匯入path模塊,Node.js內置模塊
const path = require("path");

//定義JS打包規則
module.exports = {
    entry: './src/main.js', //配置入口檔案    
    output: {
        path: path.resolve(__dirname, './dist'), //指令輸出路徑，__dirname是一個常量表示當前檔案所在路徑        
        filename: 'bundle.js' //輸出檔案名稱    
    }
}

4. 打包

然后執行webpack打包命令，webpack -h可以查看所有后綴命令

然后在生成的dist目錄下創建index.html，參考bundle.js進行測驗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./bundle.js"></script>
</body>
</html>

然后打開瀏覽器測驗，成功！

四. 案例：JS合并CSS

1. 安裝style-loader和css-loader

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

Loader 可以理解為是模塊和資源的轉換器，

首先我們需要安裝相關Loader插件

css-loader 是將 css 裝載到 javascript
style-loader 是讓 javascript 認識 css

npm install --save-dev style-loader css-loader

2. 修改webpack.config.js

//匯入path模塊,Node.js內置模塊
const path = require("path");

//定義JS打包規則
module.exports = {
    entry: './src/main.js', //配置入口檔案    
    output: {
        path: path.resolve(__dirname, './dist'), //指令輸出路徑，__dirname是一個常量表示當前檔案所在路徑        
        filename: 'bundle.js' //輸出檔案名稱    
    },
    module: {
        rules:[{
            test:/\.css$/,  //把專案中所有.css結尾的檔案進行打包
            use:["style-loader","css-loader"]
        }]
    }
}

3. 撰寫css檔案

在src檔案夾中創建style.css檔案

body {
    background-color: yellow;
}

4. 修改main.js

修改main.js入口檔案，引入style.css

//匯入out.js
const out = require("./out.js");
//匯入add.js
const add = require("./add.js");

//匯入style.css
require("./style.css")

out.out("hello" + add.add(1, 1));