一什麼是Webpack

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

從圖中咱們能夠看出，Webpack 能夠將多種靜態資源 js、css、less 轉換成一個靜態文件，減小了頁面的請求。css

簡單理解：它就是一個前端打包和壓縮工具。html

二 Webpack安裝

1 全局安裝前端

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

2 安裝後查看版本號vue

F:\vue\front\modularization_pro>webpack -v
webpack-cli 4.2.0
webpack 5.6.0

三建立項目

建立 webpack_pro文件夾java

1 初始化項目

進入目錄，執行命令webpack

npm init -y

2 建立src文件夾

3 src下建立common.js

這裏使用的是CommonJS模塊化方式，這種方式不支持ES6的語法，因此不須要Babel轉碼web

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.jsnpm

如下配置的意思是：json

讀取當前項目目錄下src文件夾中的main.js（入口文件）內容，分析資源依賴，把相關的js文件打包
打包後的文件放入當前目錄的dist文件夾下
打包後的js文件名爲bundle.js

const path = require("path") // Node.js內置模塊

module.exports = {
    entry: './src/main.js', // 配置入口文件：讀取當前項目目錄下src文件夾中的main.js（入口文件）內容，分析資源依賴，把相關的js文件打包
    output: {
        path: path.resolve(__dirname, './dist'), // 輸出路徑，__dirname：當前文件所在路徑：打包後的文件放入當前目錄的dist文件夾下
        filename: 'bundle.js' // 輸出文件：打包後的js文件名爲bundle.js
    }
}

2 執行編譯命令

webpack --mode=development
# 執行後查看bundle.js 裏面包含了上面兩個js文件的內容並進行了代碼打包

也能夠配置項目的npm運行命令，修改package.json文件

"scripts": {
    "test": "echo \"Error: no test specified 11111\" && exit 1",
    "dev": "webpack --mode=development",
    "prod": "webpack --mode=production"
  },

運行npm命令執行打包

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

3 建立入口頁面

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

<body>
    <h1>穀粒學院</h1>
    <script src="dist/bundle.js"></script>
</body>

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 = {
    entry: './src/main.js', // 配置入口文件：讀取當前項目目錄下src文件夾中的main.js（入口文件）內容，分析資源依賴，把相關的js文件打包
    output: {
        path: path.resolve(__dirname, './dist'), // 輸出路徑，__dirname：當前文件所在路徑：打包後的文件放入當前目錄的dist文件夾下
        filename: 'bundle.js' // 輸出文件：打包後的js文件名爲bundle.js
    },
    module: {
        rules: [  
            {  
                test: /\.css$/,    // 打包規則應用到以css結尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

3 在src文件夾建立style.css

body{
    background-color: rgb(34, 16, 202);
}

4 修改main.js

在第一行引入style.css

require('./style.css')

5 運行編譯命令

npm run dev

6 測試

瀏覽器中查看index.html，看看背景是否是變成藍色了？

Webpack介紹

一 什麼是Webpack