webpack
ps：webpack 最新語法有變化，也支持中文文檔。可以看官方中文文檔
- 思考題：
- 1.什麼是webpac？
- 2.由什麼組成？
- 3.如何使用？
- 部分內容參考的是 阮一峯老師的英文檔教程。
1.什麼是webpack？
我們通常在html 頁面前邊會通過 script標籤引入 一堆的js
- 這一大堆js 會造成：1. 可能變量名衝突
- 2.順序只能按照< script > 順序加載
- 3.只能自己記得 文件之間的依賴關係
- 4.大型項目各個資源難以管理。長期導致代碼混亂不堪
雖然有很多的標準出現，但風格都不一樣
- 例如：CommonJs (特點：exports 或 module.exports) 但，依然是順序加載，易阻塞。
- 例如： AMD 提高了開發成本，代碼的閱讀和書寫比較困難，模塊定義方式的語義不順暢
- 還有 其他的標準等
有沒有一種模塊化系統
可以兼容多種模塊風格，儘量可以利用已有的代碼，不僅僅只是 JavaScript 模塊化，還有 CSS、圖片、字體等資源也需要模塊化。
在編譯的時候，要對整個代碼進行靜態分析，分析出各個模塊的類型和它們依賴關係，然後將不同類型的模塊提交給適配的加載器來處理。
- 比如一個用 LESS 寫的樣式模塊，可以先用 LESS 加載器將它轉成一個CSS 模塊，在通過 CSS 模塊把他插入到頁面的 < style> 標籤中執行。
Webpack 就是在這樣的需求中應運而生。
- ## 總結：
Webpack 是一個模塊打包器。它將根據模塊的依賴關係進行靜態分析，然後將這些模塊按照指定的規則生成對應的靜態資源。
2. webpack 的主要組成
- 需要一個配置文件叫做：webpack.config.js ，運行webpack 命令時候 ，讀取其中的任務
- 先了解如何運行，自己再學習配置文件的書寫格式– 先看下邊
3.如何使用
1. 比如：a.js 裏邊引入b.js模塊。 合併爲一個js
我們使用webpack 把這兩個模塊進行合併
- 首先全局安裝 npm i -g webpack (生存環境和gulp 一樣)
- 然後在局部安裝 npm i –save-dev webpack
- npm info webpack 查看版本
- 開始使用： 合併 a.js(包含b.js) —> 輸出 ok.js
- ## 執行：webpack a.js ok.js
Webpack 會分析入口文件，解析包含依賴關係的各個文件。
這些文件（模塊）都打包到 ok.js 。
Webpack 會給每個模塊分配一個唯一的 id 並通過這個 id 索引和訪問模塊。
在頁面啓動時，會先執行 a.js 中的代碼，其它模塊會在運行 require 的時候再執行。
2. Loader (如何合併其他格式的文件)
Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進行轉換。
- 1.什麼是loader?
Loader 可以理解爲是模塊和資源的轉換器，它本身是一個函數，接受源文件作爲參數，返回轉換的結果。
我們就可以通過 require 來加載任何類型的模塊或文件，比如 CoffeeScript、 JSX、 LESS 或圖片。2.loader的組成
- Loader 本身也是運行在 node.js 環境中的 JavaScript 模塊，它通常會返回一個函數。
大多數情況下，我們通過 npm 來管理 loader，但是你也可以在項目中自己寫 loader 模塊。 - ## 總結：loader只是一個js模塊（實現格式轉換的）
- 常用的 比如說我要 寫react 項目：
用到的 轉譯工具 有 babel-core(babel核心) babel- loader(webpack接口文件) babel-preset-es2015 babel-preset-react (這兩個是babel插件) css-loader style-loaser less(核心組件) less-loader(接口文件）
3.loader的使用 壓縮css
- npm install css-loader style-loader
- 在index.html 中加入style.css
在a.js 中添加 require(“!style-loader!css-loader!./style.css”)
- 上邊的意思是 讀取外鏈的css-loader，再用style-loader插入到頁面中。
3.配置文件書寫
- ## 1).單文件入口
每次命令行執行任務，不太爽，寫入配置文件 webpack.config.js 自動執行
例如： 我們 index.html 中引入了ok.js(需要合併才能用) ok.js = a.js + b.js// webpack.config.js module.exports = { entry: './ajs', output: { filename: 'ok.js' } };2).多文件入口
如果有a.js（包含有其他模塊） 和 d.js（包含有其他模塊） 是獨立的兩個模塊 各自
壓縮就是多文件入口：module.exports = { entry: { bundle1: './a.js', bundle2: './d.js' }, output: { filename: '[name].js' } };3).react 轉譯
module.exports = { entry: './main.jsx', //jsx格式文件 output: { filename: 'reactOk.js' // 轉換成功的文件 }, module: { loaders:[ { test: /\.js[x]?$/, //匹配loader處理文件的正則 exclude: /node_modules/, // exclude忽略文件 loader: 'babel-loader?presets[]=es2015&presets[]=react' //加載loader的名稱 } ] } };4).react 轉譯的另外一種寫法（query)
- 切記：先安裝
- “babel-core”
- babel-loader
- 上邊兩個是 轉義 核心模塊，必須安裝。
而且：一定要，一定要 ，要配置好 .babelrc
“babel-preset-es2015”
- “babel-preset-react”
module.exports = { entry: './main.jsx', //jsx格式文件 output: { filename: 'reactOk.js' // 轉換成功的文件 }, module: { loaders:[ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: {presets: ['es2015', 'react']} // } ] } };
5).css-loader 的讀取和插入到頁面
- 入口文件 main.js 中加入 require(./app.css)
“`
module.exports = {
entry: ‘./main.js’,
output: {
filename: ‘bundle.js’
},
module: {
loaders:[
{
test: /.css$/,
loader: ‘style-loader!css-loader’
},
]
}
};
注意：需要用到連個loader 來處理css 一個讀取處理（css-loader），一個插入到頁面(style-loader)，\
但值得注意的是不同的 loaders 被引用的時候 在中間加入感嘆號。
- 入口文件 main.js 中加入 require(./app.css)
這裏的 書寫順序是 從右到左的，否則，webpack 會報錯。
比如： less 時候 這樣寫 style-loader!css-loader!less-loader
“`
- ## 6).Image loader 圖片加載到js中
-入口文件 mian.js 加入
```
var img1 = document.createElement("img");
img1.src = require("./small.png");
document.body.appendChild(img1);
```
```
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
loaders:[
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
]
}
};
url-loader?limit=8192 //這句的意思是：圖片大小 在8192字節內就直接轉化能base64數據圖片，
超過8192字節就 按照普通圖片輸出
```
