門頭髮光字安裝主要有兩種方式
webpack 入門
介紹
webpack 是一個模組打包器，它本身主要打包 JavaScript 模組，結合它的生態中的一些 loader 可以實現對很多其他資源的打包，例如 less、sass、圖片、es6轉es5、.vue 等等檔案資源都可以。
使用 webpack，我們最終就能實現類似於 VueCLI 這個工具提供給我們的功能：
- 打包 JavaScript
- 打包 css
- 打包 圖片
- 打包 less
- 打包 .vue 資源
- ....
- 開發階段的 Web 服務
- 程式碼熱更新
- 打包部署命令
- 。。。。
我們之所以能使用到 VueCLI 這麼方便的工具，一切都歸功於 webpack。
webpack 出來之前，還有一些別的構建工具：
- grunt
- gulp
- 百度的 fis
- PARCEL
- rollup
- ......
現在 webpack 已經被各大主流前端框架作為自己的腳手架工具的基層，例如：
- Vue：Vue CLI
- React：crate-react-app
- Angular：angular-cli
- 。。。。
為什麼要學習 webpack？
如果你需要定製這些腳手架工具，那麼最好了解一點兒 webpack 相關的內容，例如對專案進行打包優化，配置開發工具模式，。。。。一些更高階的使用方式。
打包 -> 打包結果 -> 瀏覽器就可以識別執行。
- 官網：https://webpack.js.org/
- 官方教程：https://webpack.js.org/guides/
- 官方 API 參考文件：https://webpack.js.org/api/
- 官方的中文文件連結： https://webpack.docschina.org/
- 官方教程：
- GitHub：https://github.com/webpack/webpack
Hello World
目標：體驗 webpack 的使用
一、準備
1、建立 demo1 練習專案
2、建立 index.js
現在必須叫
index.js，之後可以通過配置檔案修改
3、建立 foo.js
4、建立 index.html
二、安裝並配置 webpack 到專案中
1、建立 package.json
2、安裝 webpack 到專案的開發依賴中
# yarn add --dev webpack webpack-cli 或者 yarn add -D webpack webpack-cli
# npm install -D webpack webpack-cli
npm install --save-dev webpack webpack-cli
建議把開發工具打包相關的包的依賴資訊儲存到
devDependencies中，其實就是一個歸類，都安裝包到專案中，有利於閱讀，更清晰。
3、將 package.json 的 scripts 中新增
三、打包
npm run build
npm 就會找到 package.json 中的
build配置項，執行 webpak 構建打包。
正確的話你應該可以看到：
$ npm run build
> [email protected] build C:\Users\LPZ\Desktop\FE88\webpack-demos\demo1
> webpack
Hash: 893a9c400f1f92ab6974
Version: webpack 4.41.2
Time: 96ms
Built at: 2019-11-22 12:19:00
Asset Size Chunks Chunk Names
main.js 976 bytes 0 [emitted] main
Entrypoint main = main.js
[0] ./src/index.js + 1 modules 95 bytes {0} [built]
| ./src/index.js 34 bytes [built]
| ./src/foo.js 61 bytes [built]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
webpack 預設會找到 src/index.js 作為打包的入口，然後從入口分析所有的依賴：
- a 依賴了 b
- b 依賴了 c
- c 依賴 d
- 。。。。
- 所有依賴的檔案
將它們編譯構建處理，最終生成一個預設名字叫 main.js 檔案寫入 dist 目錄。
四、載入執行
在你 HTML 檔案中載入打包的結果 dist/main.js，訪問測試。
配置檔案
webpack 打包的入口和出口具有預設規則，如果想要自定義，或者其他一些更高階功能配置，那麼我們就需要使用它的配置檔案了。
1、在專案根目錄建立 webpack.config.js 並寫入
/**
* webpack 配置檔案
* 該檔案必須匯出一個物件
* 物件中宣告 webpack 的配置項
* 注意：webpack 是基於 Node.js 開發執行的一個構件工具，它的打包執行的時候會來執行這個檔案得到匯出的配置物件
* 所以你要知道：這裡使用的都是 Node.js 中的程式碼相關語法
*/
const path = require('path')
module.exports = {
/**
* 入口配置
*/
entry: './src/index.js',
/**
* 出口配置
*/
output: {
// __dirname 可以動態的獲取當前檔案所屬目錄的絕對路徑
// path 是 Node 中一個專門處理路徑的一個模組
// 它的 join 方法轉麼用來拼接路徑，
path: path.join(__dirname, './dist'),
// path: 'C:\\Users\\LPZ\\Desktop\\FE88\\webpack-demos\\demo1\\dist', // 打包的結果目錄，預設是 dist，必須是一個絕對路徑
// path: './dist/', // 打包的結果目錄，預設是 dist，必須是一個絕對路徑
filename: 'bundle.js' // 打包的結果檔名，預設叫 main.js
}
}
2、然後修改 package.json 檔案中的 build 配置項（非必須）
webpack 會自動載入執行名字叫
webpack.config.js的配置檔案，如果你使用了別的名字，那麼就在這裡自定義.
3、打包
npm run build
關於 npm scripts
我們安裝到專案中的 webpack，手動的方式需要這樣來使用：
打包模式 mode
mode 用來配置打包模式，有兩種模式可選：
- development 開發模式
- 更快的編譯速度
- production 生產模式
- 相比開發模式構建速度慢，擁有更好的編譯結果
- 例如程式碼壓縮
建議開發過程使用開發模式，釋出上線使用生產模式。
打包 CSS
1、安裝
npm install --save-dev style-loader css-loader
2、修改打包配置檔案
3、打包測試
打包圖片
1、安裝
npm install --save-dev file-loader
2、配置
3、打包配置
設定 HtmlWebpackPlugin
為了解決打包之後的路徑問題，我們也必須把 HTML 檔案也打包到 dist 目錄中，然後執行 dist 中的 HTML 檔案，這才是正確的方式。
1、安裝
npm install --save-dev html-webpack-plugin
2、配置
...
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
...
+ plugins: [
+ new HtmlWebpackPlugin({
+ title: '管理輸出'
+ })
+ ]
};
關於 HTMLwebpackplugin 更多內容，請參考： https://github.com/jantimon/html-webpack-plugin
3、打包測試
自動清除 dist 目錄
建議每次打包之前把 dist 目錄刪除，每次都生成最新的乾乾淨淨的內容。
1、安裝
npm install --save-dev clean-webpack-plugin
2、配置
...
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
...
plugins: [
...
new CleanWebpackPlugin(),
]
}
打包字型檔案
還是使用 file-loader，只需要增加一個配置規則即可：
打包 Less
1、安裝
# 安裝過的就不用重新安裝了
npm install less less-loader style-loader css-loader --save-dev
2、配置
3、打包測試
ES6 轉 ES5
為了讓程式碼中的 ES6 能執行在低版本瀏覽器，我們需要把 ES6 轉為 ES5 向下相容。
Babel 是一個專門將 ES6 轉 ES5 的編譯工具。
基本使用
1、安裝
npm install -D babel-loader @babel/core @babel/preset-env webpack
2、配置
3、打包測試
它只能把基本的語法轉換相容處理，例如：
- const
- let
- 箭頭函式
- 解構賦值
- 。。。
當時它不會處理一些 API 方法，例如：
- 字串的 includes 方法
- 陣列的
- find
- findIndex
- includes
- 。。。。
API 相容處理
1、安裝
npm install --save @babel/polyfill
2、配置
3、打包測試
開啟快取
當代碼檔案比較多的時候，babel 打包非常耗時，我們建議開啟快取用以提高打包的效率。
增加 source maps
使用 watch 監視模式
在 package.json 檔案中新增一個 scripts 指令碼：
使用 webpack-dev-server
- 開啟一個 Web 伺服器
- 監視打包
- 自動重新整理瀏覽器
- 。。。。
1、安裝
npm install --save-dev webpack-dev-server
2、配置
在
webpack.config.js中新增的配置項
在
package.json檔案中新增 NPM Scripts 指令碼
3、打包測試
npm run serve
熱更新
webpack-dev-server 預設是重新整理整個頁面實現更新。我們有一種更好的方式：熱更新，可以在不重新整理頁面的情況下更新內容變化，效率更高。
在 webpack 配置檔案中
提示：如果修改了配置檔案，必須重啟打包才能生效。
打包 Vue
1、安裝
npm install -D vue-loader vue-template-compiler
2、配置
3、打包測試
配置可以省略的字尾名
webpack 預設只支援省略：
- .wasm
- .mjs
- .js
- .json
等檔案的字尾名。
如果想要讓其支援其它的可省略的字尾名，需要單獨配置。
配置路徑別名
在 Vue CLI 專案中，使用過一個路徑別名：@，它表示 src 的路徑。
使用 ESLint
ESLint 專門用於 JavaScript 程式碼格式校驗工具。
- 作者：
- 《JavaScript 高階程式設計》
- 《深入理解 ECMAScript 6》
- ESLint
- 。。。
1、安裝
npm install eslint eslint-loader --save-dev
2、配置 webpack 配置檔案
在 webpack 配置檔案的 module.rules 中新增
3、配置生成 eslint 配置檔案
在終端下執行：
# 如果你是 macOS 後者 Linux 系統，則使用 ./node_modules/.bin/eslint.cmd --init
.\node_modules\.bin\eslint.cmd --init
然後就是在終端中根據嚮導完成配置：
$ .\node_modules\.bin\eslint.cmd --init
? How would you like to use ESLint?
To check syntax only
To check syntax and find problems
> To check syntax, find problems, and enforce code style
$ .\node_modules\.bin\eslint.cmd --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use?
> JavaScript modules (import/export)
CommonJS (require/exports)
None of these
$ .\node_modules\.bin\eslint.cmd --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use?
React
> Vue.js
None of these
$ .\node_modules\.bin\eslint.cmd --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? Vue.js
? Does your project use TypeScript? (y/N) n
$ .\node_modules\.bin\eslint.cmd --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? Vue.js
? Does your project use TypeScript? No
? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Browser
( ) Node
$ .\node_modules\.bin\eslint.cmd --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? Vue.js
? Does your project use TypeScript? No
? Where does your code run? Browser
? How would you like to define a style for your project?
> Use a popular style guide
Answer questions about your style
Inspect your JavaScript file(s)
$ .\node_modules\.bin\eslint.cmd --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? Vue.js
? Does your project use TypeScript? No
? Where does your code run? Browser
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow?
Airbnb: https://github.com/airbnb/javascript
> Standard: https://github.com/standard/standard
Google: https://github.com/google/eslint-config-google
$ .\node_modules\.bin\eslint.cmd --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? Vue.js
? Does your project use TypeScript? No
? Where does your code run? Browser
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Standard: https://github.com/standard/standard
? What format do you want your config file to be in?
> JavaScript
YAML
JSON
$ .\node_modules\.bin\eslint.cmd --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? Vue.js
? Does your project use TypeScript? No
? Where does your code run? Browser
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Standard: https://github.com/standard/standard
? What format do you want your config file to be in? JavaScript
Checking peerDependencies of eslint-config-standard@latest
The config that you've selected requires the following dependencies:
eslint-plugin-vue@latest eslint-config-standard@latest eslint@>=6.2.2 eslint-plugin-import@>=2.18.0 eslint-plugin-node@>=9.1.0 eslint-plugin-promise@>=4.2.1 eslint-plugin-standard@>=4.0.0
? Would you like to install them now with npm? (Y/n) y
自定義配置校驗規則
ESLint 附帶有大量的規則。你可以使用註釋或配置檔案修改你專案中要使用的規則。要改變一個規則設定，你必須將規則 ID 設定為下列值之一：
"off"或0- 關閉規則"warn"或1- 開啟規則，使用警告級別的錯誤：warn(不會導致程式退出)"error"或2- 開啟規則，使用錯誤級別的錯誤：error(當被觸發的時候，程式會退出)
詳細的規則說明請查閱： https://eslint.bootcss.com/docs/rules/ 。
也可以在程式碼中使用註釋臨時控制程式碼格式校驗：
/* eslint eqeqeq: "off", curly: "error" */
在這個例子裡，eqeqeq 規則被關閉，curly 規則被開啟，定義為錯誤級別。你也可以使用對應的數字定義規則嚴重程度：
/* eslint eqeqeq: 0, curly: 2 */
更多配置，建議參考： https://eslint.bootcss.com/docs/user-guide/configuring/ 。
在 Vue CLI 建立的專案中配置 webpack
優化。