使用前準(zhǔn)備
- 使用webpack前需要先全局安裝wepback和webpack-cli杀糯；執(zhí)行代碼：
npm install webpack webpack-cli -g
- 還需要進行初始化；之后會生產(chǎn)一個package.json牵舵，然后進行修改
初始化命令：npm init
pageage.json加入的內(nèi)容："scripts": {
"build": "webpack --mode production"
},
"devDependencies": {
"webpack": "^4.1.1",
"webpack-cli": "^2.0.12",
}
- 然后進行安裝依賴倦挂，執(zhí)行npm install
- webpack會默認打包壓縮./src/index.js;也就是說可以零配置構(gòu)建；我們執(zhí)行完npm run build之后會發(fā)現(xiàn)多了一個dist的文件夾没炒，里面就是處理好的文件犯戏；
webpack的基本概念
- entry 入口拳话，如果是單頁面應(yīng)用弃衍，那么可能入口只有一個坚俗；如果是多個頁面的項目，那么經(jīng)常是一個頁面會對應(yīng)一個構(gòu)建入口速缆；
- loader 轉(zhuǎn)換器恩闻，負責(zé)把某種文件格式的內(nèi)容轉(zhuǎn)換成 webpack 可以支持打包的模塊【胩撸可以這么理解，模塊代碼轉(zhuǎn)換的工作由 loader 來處理辱挥，除此之外的其他任何工作都可以交由 plugin 來完成边涕。
- plugin 插件，例如园爷，要使用壓縮 JS 代碼的 uglifyjs-webpack-plugin 插件式撼，只需在配置中通過 plugins 字段添加新的 plugin 即可
- output 輸出，webpack最終構(gòu)建成的配置文件
- webpack運行時會默認讀取webpack.config.js;
搭建基本的前端開發(fā)環(huán)境
- html-webpack-plugin 可以將我們的頁面和構(gòu)建 JS 關(guān)聯(lián)起來
- css-loader 負責(zé)解析 CSS 代碼扰楼，style-loader 會將 css-loader 解析的結(jié)果轉(zhuǎn)變成 JS 代碼
3.img file-loader 可以用于處理很多類型的文件美浦，如png，jpg蹬竖，gif - babel， JS 編譯工具列另，以便使用 ES6旦装、ES7 標(biāo)準(zhǔn)來編寫 JS 代碼
- 安裝webpack-dev-sever，pageage.json里面添加
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development"
}
然后運行npm run dev來開啟服務(wù)拷姿；
webpack的代碼模塊路徑
- 和模塊路徑解析相關(guān)的配置都在 resolve 字段下
- resolve.alias
假設(shè)我們有個 utils 模塊極其常用旱函，經(jīng)常編寫相對路徑很麻煩描滔，希望可以直接 import 'utils' 來引用
模糊匹配
alias: {
utils: path.resolve(__dirname, 'src/utils') // 這里使用 path.resolve 和 __dirname 來獲取絕對路徑
}
攜帶了 utils 就可以被替換掉，如import 'utils/query.js'
精確匹配
alias: {
utils$: path.resolve(__dirname, 'src/utils') // 只會匹配 import 'utils'
}
- resolve.extensions
extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx'],
這樣嘗試幫你補全那些后綴名來進行查找
// 這里的順序代表匹配后綴的優(yōu)先級券腔，例如對于 index.js 和 index.jsx拘泞，會優(yōu)先選擇 index.js - resolve.modules
像平時直接可以 import vue from ‘vue’，import axios from ‘a(chǎn)xios’
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'), // 指定當(dāng)前目錄下的 node_modules 優(yōu)先查找
'node_modules', // 如果有一些類庫是放在一些奇怪的地方的辱魁，你可以添加自定義的路徑或者目錄
],
}
- resolve.mainFields
入口聲明诗鸭，一般在pageage.json中的main，但也可以通過mainFields進行調(diào)整锻弓；可以根據(jù)是瀏覽器或者是服務(wù)器來判斷入口蝌箍；
resolve: {
// 配置 target === "web" 或者 target === "webworker" 時 mainFields 默認值是：
mainFields: ['browser', 'module', 'main'],
// target 的值為其他時，mainFields 默認值為：
mainFields: ["module", "main"],
}
5.resolve.mainFiles
個人覺得跟上面的mainFields差不多聚至，相當(dāng)于配置pageage.json中的main
