今天嘗試著寫一下webpack，不知道寫的時候會不會把自己繞進去，如果有錯誤的地方還請大家指正，謝謝閱讀的朋友，
一、認識webpack
1.1 定義：前端自動化構建工具，基于Node.js開發，
1.2 針對問題：解決引入靜態資源的合并、打包、壓縮、混淆等問題，
1.3 如果不使用自動化構建工具會有什么問題：
① 網頁加載速度慢，
② 要處理很多包與包之間的依賴關系，
二、webpack的安裝
2.1 安裝方式：
① 全域安裝：npm install webpack -g
② 安裝到專案依賴中：在專案根目錄下運行 npm install webpack --save-dev
注意：webpack4，需要同時安裝webpack-cli，
2.2 創建專案目錄：node-modules檔案夾是安裝webpack時生成的，不用手動添加，需手動添加的已經用紅色線條標出
安裝完成后，使用npx webpack 進行打包，然后會在專案目錄dist檔案下生成main.js壓縮檔案，
2.3 代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack學習</title>
<!-- 引入剛才打包生成的main.js檔案 -->
<script src="../dist/main.js"></script>
</head>
<body>
</body>
</html>
console.log('這次能行')
列印結果：
三、手動配置webpack
3.1 新建組態檔：/src/webpack.config.js（注意：在這之前請先將剛才手動創建dist檔案夾刪掉，）
3.2 配置內容：
let path = require('path ')
module.exports = {
mode: 'development', // production or development
entry: './src/index.js', // 入口檔案
output: {
filename:'main.js', // 打包之后的檔案名稱
path: path.join(__dirname, 'dist')
}
}
3.3 目錄結構:
3.4 代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack學習</title>
<!-- 引入剛才打包生成的main.js檔案 -->
<script src="../dist/main.js"> </script>
</head>
<body>
</body>
</html>
console.log('這次也可以打出來')
3.5 列印結果
4、手動配置webpack內置服務
此時頁面啟動的時候，還不能通過loaclhost啟動，webpack有一個內置的通過express實作的開發服務，我們可以安裝它，并且配置相關內容，就可以實作通過localhost來訪問頁面了，它的好處是，它不會真正的去打包，而是在記憶體中生成一個打包，
4.1 安裝： npm install webpack-dev-server -D (注意：這個大寫的D說明是開發時的依賴)
4.2 package.json配置：
4.3 webpack.config.js配置：
運行：npm run dev
5、手動配置html模板：
5.1 安裝：npm install html-webpack-plugin -D
5.2 webpack.config.js配置：
6、手動配置css
6.1 安裝loader
npm install css-loader style-loader less-loader
6.2 webpack.config.js配置：
module: {
rules: [ // 規則
// loader執行順序：默認從右向左，從下向上
{
test: /\.less$/,
use:[
{
loader: 'style-loader',
options:{
insertAt: 'bottom'
}
},
'css-loader',
'less-loader'
]},
]
}
新建index.css檔案
body {
background-color: pink;
}
index.js引入css
require('./index.css')
6.3 執行npm run dev
寫到這，我已經把自己寫糊涂了，后面的內容，我自己再屢屢，我不知道大家能不能看的明白，如果有錯誤的地方，歡迎大家指正，共同進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/107155.html
標籤：其他
上一篇：VUE 3.0初體驗