webpack基本介紹及使用

2022-09-06 08:03:08 字數 1959 閱讀 7809

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

從上圖看出，webpack可以將多種靜態資源js，css，less轉換成乙個靜態檔案，減少頁面的請求。

全域性安裝：

npm install webpack -g

npm install webpack-cli -g

檢視版本號：

webpack -v

3.1 js打包

1.建立src檔案，src裡建立bar.js

//bar


exports.info = function(str)
2.src裡建立logic.js

//logic


exports.add = function(a,b)
3.src裡建立main.js

var bar = require("./bar");


var logic = require("./logic");


require('./css1.css');


bar.info("hello world! "+logic.add(100,200));
4.建立配置檔案webpack.config.js，與src處於同級目錄

const path = require('path');


module.exports = ,


};
含義：讀取當前目錄下src資料夾中的main.js（入口檔案）內容，把對應的js檔案打包，打包後的檔案放入當前目錄的dist資料夾下，打包後的js檔名為bundle.js。

5.執行編譯命令

webpack

編譯後檢視dist資料夾下的bundle.js檔案，會發現該檔案包含了上面兩個js檔案的內容

6.建立index.html頁面，引用bundle.js
開啟index.html頁面，檢視頁面效果

3.2 css打包

1.安裝style-loader和css-loader

webpack本身只能處理j**ascript模組，若要處理其他型別的檔案，需要使用loader進行轉換。

loader 可以理解為是模組和資源的轉換器，它本身是乙個函式，接受原始檔作為引數，返回轉換的結果。這樣，我們就可以通過 require 來載入任何型別的模組或檔案，比如coffeescript、 jsx、 less 或。首先我們需要安裝相關loader外掛程式，css-loader 是將 css 裝載到 j**ascript；style-loader 是讓 j**ascript 認識css

cnpm install style‐loader css‐loader ‐‐s**e‐dev

2.修改webpack.config.js，新增module

const path = require('path');


module.exports = ,


module: 


]  }


};
3.src裡建立css資料夾，css下建立css1.css

body
4.修改main.js，引入css1.css

require('./css1.css');
5.重新執行webpack

6.執行index.html，檢視頁面背景色

webpack基本使用

npm install webpack webpack cli webpack dev server d 複製 當在專案中直接執行webpack時，預設讀取webpack.config.js中的配置，等同於執行 webpack webpack.config.js const path require...

webpack基本使用

執行 npm install webpack webpack cli d 命令，安裝 webpack 相關的包 在專案根目錄建立名為 webpack.config.js 的 webpack 配置檔案 在 webpack 的配置檔案中，初始化如下基本配置 module.exports 在 packag...

webpack基本使用

webpack作為乙個打包工具，通過給定的入口檔案，通過loader等掃瞄手段，將不同的.js,css,scss等各種檔案，壓縮打包成乙個指定位置的出口壓縮js檔案 node modules 為node安裝模組 public 存放一些公共檔案或壓縮後的原始碼 src 存放一些原始碼 package....