- 簡介
- Webpack是一個其那段資源加載/打包工具，它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源
- 作用
- 可以將多種靜態資源js、css、less轉換成一個靜態檔案，減少了頁面的請求
- 使用方式
- 全域安裝Webpack（盡量在專案目錄中執行cmd命令）
npm install -g webpack webpack-cli - 在專案目錄的js目錄中創建幾個js檔案（之間的關聯任意），例如common.js、index.js、about.js、main.js(入口js檔案)等等
- 打包（只打包js檔案）
- 在專案根目錄中創建組態檔webpack.config.js（檔案名最好固定，內容結構固定）
// Node.js內置模塊 const path = require("path"); module.exports = { // 配置入口檔案 entry: "./src/assets/js/main.js", output: { // 輸出路徑，__dirname：當前檔案所在路徑，最好事先創建好 path: path.resolve(__dirname, "./dist"), // 輸出檔案 filename: "bundle.js" } } - 命令列執行編譯命令
- cmd視窗執行
webpack # 這個會有警告資訊 或者 webpack --mode=development # 這個沒有警告資訊
- cmd視窗執行
- 完成js檔案的打包
- 在專案根目錄中創建組態檔webpack.config.js（檔案名最好固定，內容結構固定）
- 同樣在專案目錄的css目錄中創建幾個css檔案，然后在main.js(入口js檔案)引入css檔案
- 安裝css加載工具
npm install --save-dev style-loader css-loader - 上面的webpack.config.js組態檔中添加內容（和output鍵同級）
module: { rules: [ { // 打包規則應用到以css結尾的檔案上 test: /\.css$/, use: ['style-loader', 'css-loader'] } ] } - 打包執行同樣的命令即可
- 全域安裝Webpack（盡量在專案目錄中執行cmd命令）
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/432043.html
標籤：其他