一：關(guān)于對(duì)webpack的理解
可以將其認(rèn)為是一個(gè)電腦主板，由于使用js作為源碼，因而其可以默認(rèn)編譯js代碼(別種類型的文件可以依靠loaders或plugins)，因?yàn)槠涞讓佑蒼ode提供支持，因而其支持編譯common/esmodule的導(dǎo)入方式。而其被三大框架使用的原因是生態(tài)————提供了近乎所有文件的編譯工具，這也使得webpack對(duì)整個(gè)前端工程的支持近乎全面。
二：安裝
想要安裝使用webpack,應(yīng)首先確保安裝node
截至當(dāng)前，webpack更新到了5，筆者也使用的webpack5,node最低需12.x.x，可以命令行下使用node -v查看node版本
命令行下輸入以下命令：
//全局安裝
npm install webpack webpackcli -g?
//局部安裝(推薦)
npm install webpack webpackcli -D
問(wèn)題1：推薦局部安裝的原因
有時(shí)候可能項(xiàng)目的webpack版本不同，不同的webpack可能會(huì)存在不兼容
問(wèn)題2：為什么要安裝webpackcli，
webpackcli并不是必需的，三大框架并沒(méi)有安裝webpackcli，安裝webpackcli是由于當(dāng)前命令行里需要webpackcli執(zhí)行webpack內(nèi)的命令且需要一些參數(shù)時(shí)，換句話說(shuō)，此刻webpack需要webpackcli執(zhí)行帶參數(shù)的 命令，而webpackcli又依賴webpack(互相依存)
讀者也可以指定webpack版本：
// 如：npm install webpack@3.6.0
npm install webpack@xxxxx
三：嘗試寫一個(gè)小demo
如果全局安裝了webpack:
全局環(huán)境下，webpack命令可以在任一目錄中使用
為演示webpack同時(shí)支持es6導(dǎo)入導(dǎo)出和common導(dǎo)入導(dǎo)出，以下兩個(gè)非index.js文件使用兩種方式
新建項(xiàng)目目錄：
—mydemo
______src
——————__index.js
——————__common.js
——————__esmodule.js
——index.html
//common.js
// node的導(dǎo)出流
const common_export = function(){
? return '我是node的導(dǎo)出流'
}
module.exports = {
? common_export
}
//esmodule.js
// es6的導(dǎo)出流
export function es_export(){
? return '我是esmodule的導(dǎo)出流'
}
// index.js
import { es_export? } from './esmodule'
const { common_export } = require('./common')
console.log(es_export(),common_export());
此時(shí)可以在mydemo目錄命令行下輸入webpack
即可生成一個(gè)dist目錄，且內(nèi)部生成一個(gè)main.js的文件，即如今項(xiàng)目結(jié)構(gòu)顯示如下：
—mydemo
______dist
——————__main.js
______src
——————__index.js
——————__common.js
——————__esmodule.js
——index.html
假設(shè)讀者有l(wèi)ive-server這個(gè)插件且index.html中引入了./dist/main.js這個(gè)文件，在live on browers以后控制臺(tái)會(huì)出現(xiàn)打印消息：
此時(shí)可以做個(gè)總結(jié)：
webpack天然支持js的兩種導(dǎo)入導(dǎo)出流
在輸入webpack后會(huì)默認(rèn)將當(dāng)前目錄下src目錄中的index.js作為入口，且會(huì)默認(rèn)在當(dāng)前目錄下生成dist目錄并將打包后的js文件合并成./dist/main.js
webpack天然支持生成靜態(tài)文件，只需在index.html中引用打包后的main.js文件即可
局部使用
局部環(huán)境下，想要執(zhí)行webpack命令，需要將webpack作為node中的一個(gè)包使用，此時(shí)，需要使用npm包管理器，換句話說(shuō)，需要node支持
想要使用node環(huán)境，需要使用npm init命令生成package.json目錄，這個(gè)目錄記錄當(dāng)前npm的一些信息，可以在這里查看已安裝的包目錄
如果目錄中有中文名，可以使用npm init -y命令，這是由于node對(duì)中文的支持并不好
注：于全局目錄此時(shí)保持一致
在新建目錄下進(jìn)行npm初始化
npm init -y
下載webpack包
npm install webpack -D
-D是指開(kāi)發(fā)時(shí)要用到的依賴，-S是生產(chǎn)環(huán)境也要用到的依賴
如果此時(shí)package.json中顯示有webpack包名，則說(shuō)明局部安裝成功
注意：此時(shí)此刻想要打包文件，不應(yīng)使用webpack命令，因?yàn)橐坏褂脀ebpack命令，則會(huì)使用全局的webpack進(jìn)行打包————這與初衷不符
如何使用局部webpack命令打包項(xiàng)目？
可以使用.bin
使用.bin默認(rèn)查找node-module下的webpack
.\node_modules\.bin\webpack
使用npx
使用npx將優(yōu)先使用局部webpack,同方法1一樣
npm webpack
package.json的script字段中，使用命令(推薦使用)
如果是這種方式，可以使用npm run build命令，此時(shí)將默認(rèn)執(zhí)行局部的webpack命令（本質(zhì)上，所有局部查找的命令都是查找node-modules里的安裝的包并且運(yùn)行這個(gè)包）
下一記：webpack本身的配置以及其loader配置
USB Microphone https://www.soft-voice.com/
Wooden Speakers? https://www.zeshuiplatform.com/
亞馬遜測(cè)評(píng) www.yisuping.cn
深圳網(wǎng)站建設(shè)www.sz886.com
