demo及筆記：
# 前端構建工具webpack的學習
## 什麼是webpack？
## webpack可以做什麼？
1. 優化：刪除多餘的冗餘**，壓縮；
2. 轉換：jsx，es6，es6的語法轉換，less，sass等預編譯處理器的轉換；
3. 打包：合併多餘檔案，減少請求次數，加快響應；
4. devserver**解決跨域問題。
5. ......
## 目標
1. 通過webpack完成對公司現有專案從0開始的定製化搭建；
2. 摒棄現在腳手架中冗餘的**及配置；
3. 了解wbpack的一些原理，流程。
## 結構
```js
module.exports = , // 載入轉換=》less || sass || || j'sx || es6 || es7
plugins: , // 外掛程式
devserver: {}, // 服務**
resolve: {}, // 特殊問題的解決方案 }
```## 基本配置與命令列操作
### 命令列操作
安裝：```
npm i webpack webpack -cli -g
```webpack：webpack的核心模組
```
webpack -v 檢視當前webpack的版本號
webpack --mode development/production 指定webpack的執行模式為開發模式/生產模式，預設是生產模式
webpack --config filename 指定webpack命令依賴的配置檔案，預設是webpack.config.js檔案
webpack src/main.js --output filename 指定輸出檔案為filename,預設輸出檔案為dist/main.js
```###基本配置
1. 在專案根目錄執行npm init -y生成package.json檔案
2. 在scripts物件中新增命令
```"scripts":
```3. 執行npm run build命令時，就相當於執行了webpack src/main.js --mode development命令
## 屬性詳解
### entry
```js
module.exports = ，
output: , }
```### output
```js
module.exports =
output: }
```### plugins
webpack依賴於node.js。因此引入依賴模組時需要使用node.js的模組匯入
####clean-webpack-plugin
> 可以實現在打包時，清空原有的內容，該外掛程式每次迭代使用方法差距較大需要關注官方文件
>
####html-webpack-plugin
> 缺省會在dist檔案下生成乙個html檔案並引入打包好的js檔案，詳細功能見demo
>
#### extrace-text-webpack-plugin
> 拆分打包後的css檔案到單獨的css資料夾，而不是載入到html的style中
>
### module
各個模組的載入轉換預編譯處理器=》css，es6抓換成es5等。
####css
```js
// npm install style-loader css-loader -d
module: ) // 拆分打包後的css檔案 需在外掛程式中註冊 },
] },
```####less
```js
// npm install style-loader css-loader less less-loader -d
module: ) // 拆分打包後的css檔案 需在外掛程式中註冊 },
] },
```####sass
```js
// npm install style-loader css-loader sass-loader node-sass -d
module: ) // 拆分打包後的css檔案 需在外掛程式中註冊 },
] },
```#### image
```js
// npm i url-loader file-loader -d
module: }
] },
] },
```#### jsx|es6|es7|es8|es9...
```js
// npm install babel-loader babel-core babel-preset-react babel-preset-env -d
module: }
] },
resolve: ,
``` 注：
1. 之所以要配置這些東西，是為了支援在js中引入這些css/img靜態資源檔案，並將這些資源打包載入。
2. 需要注意的是loader:["stye-loader","css-loader"],這兩個必須在開始且順序不能亂，因為他的執行是從右開始執行，比如說less轉換成css=》載入到style=》extract拆分到單獨的路徑。
### devserver
設定webpack的服務模組，可設定服務**，解決跨域問題
```js
module.exports = }
}}, }
```##demo
```js
const = require('clean-webpack-plugin');
const htmlwebpackplugin = require('html-webpack-plugin');
const extracttextplugin = require("extract-text-webpack-plugin");
module.exports =
plugins: [
new cleanwebpackplugin(),
new htmlwebpackplugin(, // 壓縮的一些設定
}),new extracttextplugin("css/styles.css"), // 指定分離後的css檔案路徑 需要配合module下rules下extracttextplugin.extract({})來使用 ],
module: ) },
) },
) },
} ] },
} ]},
module: ) },
) },
) },
} ] },
} ]},
resolve: ,
devserver: }
}}, }
```
webpack基本配置
1 context context path.resolve dirname,js 配合entry，含義是從當前專案目錄下的js檔案下查詢入口檔案基本目錄，絕對路徑，用於從配置中解析入口起點和載入器。2 entry entry js main.js 應用程式的起點入口，從這個起點開始，應用程式啟動執...
webpack基本配置
一 新建專案 二 包管理管理專案 npm init y 當建立的專案根目錄名稱是中文或者包含中文，就不能使用 y 命令 直接使用 npm init 之後會讓你手寫專案名稱 keywords author license isc 生成了 package.json 檔案，該檔案集中管理了專案中所用到的包...
基本的webpack配置
全域性安裝npm install webpack g本地安裝npm install webpack webpack cli webpack dev server d建立webpack.config.js檔案 在package.json的scripts中新增以下 如果webpack.config.js...