Posted 2021-04-29 鍓嶇闄屼笂瀵?/a> 浠庨

娌″叧娉紵浼稿嚭鎵嬫寚鐐硅繖閲?--

鍦ㄦ帴涓嬫潵鐨勫嚑澶╅噷锛屾垜浼氭寔缁笉鏂殑鏇存柊鍏充簬webpack4鐨勭郴鍒楁枃绔狅紝鎰熷叴瓒ｇ殑灏忎紮浼达紝蹇揩鏉ュ洿瑙?/p>

鏄ㄥぉ

鎴戜滑鎴戜滑绮楃嚎鏉＄殑璁ㄨ浜唚ebpack鐨勫嚑涓牳蹇冩蹇碉紝鍙互鎴宠繖閲岃繘琛屽涔狅紝璇村埌webpack锛宯ode鍜宯pm灏辨槸鎴戜滑缁曚笉寮€鐨勮瘽棰橈紝鍏充簬npm鐨勪竴浜涗娇鐢ㄦ妧宸э紝鎴戜箣鍓嶆暣鐞嗕簡涓€绡囨枃绔狅紝鏈夊叴瓒ｇ殑灏忎紮浼村彲浠ョ偣杩欓噷鏌ョ湅锛屽ソ鐨勶紝鍑嗗鍑哄彂馃毝

浠婂ぉ

浠庝粖澶╄捣鎴戜滑浣跨敤webpack4锛屾墜鍔ㄦ惌寤轰竴涓獀ue椤圭洰锛屽綋鐒舵埅姝㈠埌浠婂ぉ2018-11-11锛寁ue-cli宸茬粡鏇存柊鍒?.1.1浜嗭紝澶ч噺绠€鍖栦簡閰嶇疆锛屾垜浠湪杩欓噷閫夋嫨鎵嬪姩鎼缓锛岀洰鐨勬槸浜嗚Вwebpack鐨勫叿浣撻厤缃紝鍦ㄤ互鍚庣殑椤圭洰涓紝淇敼浠ュ強瀹氬埗鍖栦竴浜涢厤缃紝鍙互娓稿垉鏈変綑銆?/p>

椤圭洰鍒濆鍖?/span>

鈿狅笍Node鐗堟湰渚濊禆鍋氫簡閲嶆柊璋冩暣锛堥槄璇诲師鏂囨煡鐪嬮摼鎺ワ級
瀹樻柟寤鸿node鐗堟湰

  "engines": {
    "node": ">=6.11.5"
  },

鎴戝綋鍓峮ode鐗堟湰涓?.9.0
濂戒簡锛岀幇鍦ㄥ彲浠ュ垵濮嬪寲椤圭洰浜?/p>

npm init

鍏ㄥ眬瀹夎 webpack

npm install webpack -g

鐒跺悗鏈湴瀹夎鐩稿叧渚濊禆

npm i webpack webpack-cli webpack-dev-server -D
npm i vue vue-router axios -S

-D,-S

-D鏄?-save-dev鐨勭缉鍐欏舰寮忥紝-S鏄?-save鐨勭缉鍐欏舰寮忥紝i鏄痠nstall鐨勭缉鍐?br>瀹夎瀹屾瘯鍚庯紝package.json澶氫簡涓嬮潰涓や釜瀵硅薄

• dependencies

• devDependencies

--save鍙傛暟琛ㄧず灏嗚妯″潡鍐欏叆dependencies灞炴€э紝
--save-dev琛ㄧず灏嗚妯″潡鍐欏叆devDependencies灞炴€с€?br>dependencies鏄繍琛屾椂渚濊禆锛宒evDependencies鏄紑鍙戞椂鐨勪緷璧栥€?/strong>

闆堕厤缃?/span>

webpack4鍙桺arcel鎵撳寘宸ュ叿鍚彂锛屽敖鍙兘鐨勮寮€鍙戣€呰繍琛岄」鐩殑鎴愭湰鍙樹綆銆備负浜嗗仛鍒?閰嶇疆锛寃ebpack4涓嶅啀寮哄埗闇€瑕?webpack.config.js 浣滀负鎵撳寘鐨勫叆鍙ｉ厤缃枃浠朵簡锛屽畠榛樿鐨勫叆鍙ｄ负'./src/'鍜岄粯璁ゅ嚭鍙?./dist'锛岃繖鏃犵枒瀵瑰皬椤圭洰鑰岃█鏄闊炽€?br>浣犳墍闇€瑕佸仛鐨勬槸鍦ㄤ綘鐨勯」鐩噷鍖呭惈 ./src/index.js 鏂囦欢銆傚綋鍦ㄥ懡浠よ閲屾墽琛?webpack 鍛戒护鏃讹紝webpack浼氬皢璇ユ枃浠朵綔涓洪」鐩殑鍏ュ彛鏂囦欢杩涜鎵撳寘閰嶇疆銆?br>鎴戜滑鍦ㄨ繖閲屼笉鑰冭檻闆堕厤缃殑鎯呭喌锛?/p>

閰嶇疆webpack.config.js

鎴戜滑鍏堝湪鏍圭洰褰曚笅鍒涘缓webpack.config.js锛堝悗鏈熶細瀵圭洰褰曠粨鏋勫仛璋冩暣锛?/p>

const webpack = require('webpack');
const path = require('path');

const config = {

}

module.exports = config;

path

鍦╳ebpack閲屽父瑙佺殑涓€涓姛鑳絧ath,鎴戜滑绠€鍗曚粙缁嶄竴浜涳紝宸茬粡浜嗚В鐨勫彲浠ュ拷鐣?/p>

var path = require('path')

path涓簄odejs鑷甫鍔熻兘锛堥槄璇诲師鏂囨煡鐪嬮摼鎺ワ級

甯哥敤鍔熻兘浠嬬粛

path.join() 鏂规硶浣跨敤骞冲彴鐗瑰畾鐨勫垎闅旂鎶婂叏閮ㄧ粰瀹氱殑 path 鐗囨杩炴帴鍒颁竴璧凤紝骞惰鑼冨寲鐢熸垚鐨勮矾寰勩€?/p>

闀垮害涓洪浂鐨?path 鐗囨浼氳蹇界暐銆?濡傛灉杩炴帴鍚庣殑璺緞瀛楃涓叉槸涓€涓暱搴︿负闆剁殑瀛楃涓诧紝鍒欒繑鍥?'.'锛岃〃绀哄綋鍓嶅伐浣滅洰褰曘€?/p>

path.join('/foo', 'bar', 'baz/asdf', 'quux', '..');
// 杩斿洖: '/foo/bar/baz/asdf'
path.join('foo', {}, 'bar');
// 鎶涘嚭 'TypeError: Path must be a string. Received {}'

path.resolve() 鏂规硶浼氭妸涓€涓矾寰勬垨璺緞鐗囨鐨勫簭鍒楄В鏋愪负涓€涓粷瀵硅矾寰?/strong>銆?/p>

path.resolve('/foo/bar', './baz');
// 杩斿洖: '/foo/bar/baz'

path.resolve('/foo/bar', '/tmp/file/');
// 杩斿洖: '/tmp/file'

path.resolve('wwwroot', 'static_files/png/', '../gif/image.gif');
// 濡傛灉褰撳墠宸ヤ綔鐩綍涓?nbsp;/home/myself/node锛?/span>
// 鍒欒繑鍥?nbsp;'/home/myself/node/wwwroot/static_files/gif/image.gif'

__dirname
褰撳墠妯″潡鐨勬枃浠跺す鍚嶇О銆傜瓑鍚屼簬 __filename 鐨?path.dirname() 鐨勫€笺€傜ず渚嬶細杩愯浣嶄簬 /Users/mjr鐩綍涓嬬殑example.js鏂囦欢锛歯ode example.js

console.log(__dirname);
// Prints: /Users/mjr
console.log(path.dirname(__filename));
// Prints: /Users/mjr

__filename
褰撳墠妯″潡鐨勬枃浠跺悕绉?--瑙ｆ瀽鍚庣殑缁濆璺緞銆?br>鍦ㄤ富绋嬪簭涓繖涓嶄竴瀹氳璺熷懡浠よ涓娇鐢ㄧ殑鍚嶇О涓€鑷淬€?br>渚嬪锛?br>鍦?/Users/mjr 鐩綍涓嬫墽琛?node example.js

console.log(\__filename);
// Prints: /Users/mjr/example.js
console.log(__dirname);
// Prints: /Users/mjr

__dirname 杩斿洖缁濆璺緞

---

鍐嶈mode妯″紡

鏄ㄥぉ鎴戜滑鎺㈣浜嗕竴浜沵ode鐨勭浉鍏冲唴瀹癸紝浠婂ぉ鎴戝氨璇︾粏璁ㄨ
杩欐槸鍦?Webpack4.0 涔嬪悗鏂板鐨勫唴瀹癸紝鐩殑灏辨槸鍑忓皯閮ㄥ垎灞炴€х殑濉啓锛屼娇 Webpack 鏇村鏄撲笂鎵嬶紝鏃犲舰涓噺灏戜簡涓€浜涢厤缃€?br>杩欎釜灞炴€т富瑕佸氨鏄湁涓や釜鍊?production銆乨evelopment锛屼富瑕佸氨鏄０鏄庡綋鍓嶆槸鐢熶骇妯″紡杩樻槸寮€鍙戞ā寮忥紝榛樿涓簆roduction妯″紡锛岄€夋嫨 none 涔熷彲浠ワ紝浣嗘槸浼氭湁涓€涓?warning鈿狅笍銆?br>浣犲彲鑳戒細鏈変竴涓枒闂紝杩欓噷鍙湁鐢熶骇鐜鍜屽紑鍙戠幆澧冿紝閭ｆ祴璇曠幆澧冿紝棰勫彂甯冪幆澧冩€庝箞澶勭悊鍛紵
绛旓細杩欓噷鎵€璇寸殑鐢熶骇鐜锛屽氨鏄櫎浜嗗紑鍙戠幆澧冿紙鏈湴鐜锛変互澶栫殑鐜锛屽彧瑕佸線绾夸笂璧帮紝mode閮芥槸production
development 妯″紡涓嬶紝灏嗕晶閲嶄簬鍔熻兘璋冭瘯鍜屼紭鍖栧紑鍙戜綋楠岋紝鍖呭惈濡備笅鍐呭锛?/p>

1. 娴忚鍣ㄨ皟璇曞伐鍏?/span>

2. 寮€鍙戦樁娈电殑璇︾粏閿欒鏃ュ織鍜屾彁绀?/span>

3. 蹇€熷拰浼樺寲鐨勫閲忔瀯寤烘満鍒?/span>

production 妯″紡涓嬶紝灏嗕晶閲嶄簬妯″潡浣撶Н浼樺寲鍜岀嚎涓婇儴缃诧細

1. 寮€鍚墍鏈夌殑浼樺寲浠ｇ爜

2. 鏇村皬鐨?bundle 澶у皬

3. 鍘婚櫎鎺夊彧鍦ㄥ紑鍙戦樁娈佃繍琛岀殑浠ｇ爜

4. Scope hoisting 鍜?Tree-shaking

5. 鑷姩鍚敤 uglifyjs 瀵逛唬鐮佽繘琛屽帇缂?/span>

---

Scope hoisting 鏄粈涔堬紵

Scope Hoisting 鍙互璁?Webpack 鎵撳寘鍑烘潵鐨勪唬鐮佹枃浠舵洿灏忋€佽繍琛岀殑鏇村揩锛?br>瀹冨張璇戜綔 "浣滅敤鍩熸彁鍗?锛屾槸鍦?Webpack3 涓柊鎺ㄥ嚭鐨勫姛鑳姐€?/p>

鍏蜂綋鍙互鍙傝€冮€氳繃Scope Hoisting浼樺寲Webpack杈撳嚭锛?span class="mq-137">闃呰鍘熸枃鏌ョ湅鍙傝€冮摼鎺?/span>锛?/span>

Tree-shaking

绠€鍗曡灏辨槸鍘婚櫎璋僯s涓病鏈変娇鐢ㄧ殑姝讳唬鐮?br>璐村嚑涓摼鎺ワ紝鍙互鐪嬬湅鍏蜂綋浠嬬粛锛堥槄璇诲師鏂囨煡鐪嬪弬鑰冮摼鎺ワ級
浣犵殑Tree-Shaking骞舵病浠€涔堝嵉鐢?br>Tree-Shaking鎬ц兘浼樺寲瀹炶返 - 鍘熺悊绡?/p>

---

涓嶅悓鐨勭幆澧冭浣跨敤涓嶅悓鐨勬ā寮忥紝涓轰簡鎻愰珮浠ｇ爜澶嶇敤锛屾垜闂ㄤ娇鐢╬rocess杩欎釜鍏ㄥ眬鍙橀噺鏉ユ帶鍒舵ā寮忕殑杞崲锛岄€氳繃process.env.NODE_ENV 鏉ュ垽鏂綋鍓嶆槸浠€涔堟ā寮忋€?br> process.env 杩斿洖褰撳墠椤圭洰鎵€鍦ㄧ幆澧冪殑涓€浜涗俊鎭紝鏄竴涓璞°€備篃鍙互瀵硅繖涓璞¤繘琛屼竴浜涗慨鏀癸紝姣旀柟璇?process.env.foo = 'bar'锛?br> 鍥犱负寮€鍙戠幆澧冨彲鑳芥湁澶氱锛岋紙鏈湴寮€鍙戯紝绾夸笂寮€鍙戯紝绾夸笂娴嬭瘯锛岄鍙戝竷锛岀敓浜э級锛屾墍鏈夋垜浠坊鍔犱竴涓垽鏂紝涓嶆槸鏈湴寮€鍙戠幆澧冿紙development锛夌殑锛屽叏閮ㄦ寚鍚憁ode鐨刾roduction妯″紡锛屾墍浠ョ幇鍦ㄧ殑 webpack.config.js 灏卞彉鎴愪簡杩欐牱锛?/p>

const webpack = require('webpack');
const path = require('path');
let  env=process.env.NODE_ENV=="development"?"development":"production";
const config = {
    mode: env,
}

module.exports = config;

mode涔熸敮鎸佸懡浠よ

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

entry

鍏ュ彛锛屼竴涓€荤殑js鏂囦欢锛屽氨鏄綘鍙互鍦ㄨ繖閲屽紩鍏ヤ綘鎵€闇€瑕佺殑鍏朵粬js鏂囦欢锛屼笉绠℃槸 require 杩樻槸 import锛學ebpack 閮芥槸鍙互瑙ｆ瀽鐨勶紝
entry鐨勯厤缃槸蹇呭～鐨勶紝涓嶅～灏辨姤閿?/p>

context

context 鏄?webpack 缂栬瘧鏃剁殑鍩虹鐩綍锛屽叆鍙ｈ捣鐐癸紙entry锛変細鐩稿浜庢鐩綍鏌ユ壘銆傝嫢涓嶉厤缃紝榛樿涓烘墽琛屽惎鍔╳ebpack鏃舵墍鍦ㄧ殑褰撳墠宸ヤ綔鐩綍锛岃嫢鎯虫敼鍙橀粯璁ら厤
context 搴旇閰嶇疆涓虹粷瀵硅矾寰?/strong>锛屽亣濡傚叆鍙ｈ捣鐐逛负src/main.js锛屽垯鍙互閰嶇疆锛?/p>

module.exports ={
    context: path.resolve('./src'),
    entry: './main.js'
}

姝ゆ椂 entry 涓嶈兘鍐嶉厤缃负'./src/main.js'锛屽洜涓?webpack 浼氱浉瀵逛簬 context 閰嶇疆鐨?src 鐩綍鍖烘煡鎵惧叆鍙ｈ捣鐐癸紙main.js锛夛紝鑰?main.js 灏卞湪姝ょ洰褰曚笅锛屾墍浠ュ簲褰撳皢 entry 閰嶇疆涓哄綋鍓嶇洰褰曪紙./锛夈€?/p>

entry 绫诲瀷

entry鎺ュ彈涓夌褰㈠紡鐨勫€硷細瀛楃涓诧紝鏁扮粍鍜屽璞?/p>

瀵硅薄褰㈠紡

entry: {
    <key>: <value>
    ...
}

瀵硅薄涓殑姣忎竴瀵瑰睘鎬у锛岄兘浠ｈ〃鐫€涓€涓叆鍙ｆ枃浠讹紝鍥犳澶氶〉闈㈤厤缃椂锛岃偗瀹氭槸瑕佺敤杩欑褰㈠紡鐨別ntry閰嶇疆銆?/p>

key

瀵硅薄涓璳ey鍙互鏄畝鍗曠殑瀛楃涓诧紝姣斿锛?app', 'main', 'entry-1'绛夈€傚苟涓斿搴旂潃output.filename閰嶇疆涓殑[name]鍙橀噺

entry: {
    'app-entry': './app.js'
},
output: {
    path: './output',
    filename: '[name].js'
}

涓婇潰鐨勯厤缃墦鍖呭悗鐢熸垚锛?/p>

key杩樺彲浠ユ槸璺緞瀛楃涓层€傛鏃秝ebpack浼氳嚜鍔ㄧ敓鎴愯矾寰勭洰褰曪紝骞跺皢璺緞鐨勬渶鍚庝綔涓篬name]銆傝繖涓壒鎬у湪澶氶〉闈㈤厤缃笅涔熸槸寰堟湁鐢ㄧ殑

entry: {
    'path/of/entry': './deep-app.js',
    'app': './app.js'
},
output: {
    path: './output',
    filename: '[name].js'
}

涓婇潰鐨勯厤缃墦鍖呭悗鐢熸垚锛?/p>

value

value濡傛灉鏄瓧绗︿覆锛岃€屼笖蹇呴』鏄悎鐞嗙殑noderequire鍑芥暟鍙傛暟瀛楃涓层€傛瘮濡傛枃浠惰矾寰勶細'./app.js'(require('./app.js'))锛涙瘮濡傚畨瑁呯殑npm妯″潡锛?lodash'(require('lodash'))

entry: {
    'my-lodash': 'lodash'
},
output: {
    path: './output',
    filename: '[name].js'
}

涓婇潰鐨勯厤缃墦鍖呭悗鐢熸垚锛?/p>

value濡傛灉鏄暟缁勶紝鍒欐暟缁勪腑鍏冪礌闇€瑕佹槸涓婇潰鎻忚堪鐨勫悎鐞嗗瓧绗︿覆鍊笺€傛暟缁勪腑鐨勬枃浠朵竴鑸槸娌℃湁鐩镐簰渚濊禆鍏崇郴鐨勶紝浣嗘槸鍙堝浜庢煇浜涘師鍥犻渶瑕佸皢瀹冧滑鎵撳寘鍦ㄤ竴璧枫€傛瘮濡傦細

entry: {
    vendor: ['jquery', 'lodash']
}

瀛楃涓瞖ntry

entry: './app.js'

绛変环浜庝笅闈㈢殑瀵硅薄褰㈠紡锛?/p>

entry: {
    main: './app.js'
}

鏁扮粍entry

entry: ['./app.js', 'lodash']

绛変环浜庝笅闈㈢殑瀵硅薄褰㈠紡锛?/p>

entry: {
    main: ['./app.js', 'lodash']
}

chunk鍚嶇О

webpack浼氫负姣忎釜鐢熸垚鐨凜hunk鍙栦竴涓悕绉帮紝Chunk鐨勫悕绉板拰Entry鐨勯厤缃湁鍏筹細

1. 濡傛灉entry鏄竴涓猻tring鎴栬€卆rray锛屽氨鍙細鐢熸垚涓€涓猚hunk锛岃繖涓猚hunk鐨勫悕绉版槸main;

2. 濡傛灉entry鏄竴涓猳bject锛屽氨鍙兘鍑虹幇澶氫釜chunk锛岃繖鏃禼hunk鐨勫悕绉版槸object閿€煎閲岄敭鐨勫悕绉?/span>

閰嶇疆鍔ㄦ€丒ntry

鍋囧椤圭洰閲屾湁澶氫釜椤甸潰闇€瑕佷负姣忎釜椤甸潰鐨勫叆鍙ｉ厤缃竴涓猠ntry锛屼絾杩欎簺椤甸潰鏁伴噺鍙兘浼氫笉鏂闀匡紝杩欐椂entry鐨勯厤缃細鍙楀埌鍏朵粬鍥犵礌鐨勫奖鍝嶅鑷翠笉鑳藉啓鎴愰潤鎬佺殑鍊笺€傝В鍐冲姙娉曞氨鏄妸entry璁剧疆鎴愪竴涓嚱鏁板幓鍔ㄦ€佽繑鍥炰笂闈㈡墍璇寸殑閰嶇疆锛?/p>

//鍚屾鍑芥暟
entry: () => {
    return {
        a: './pages/a',
        b: './pages/b'
    }
}

//寮傛鍑芥暟
entry: () => {
    return new Promise((resolve) => {
        resolve({
            a: './pages/a',
            b: './pages/b'
        })
    })
}

褰撶粨鍚?output.library 閫夐」鏃讹細濡傛灉浼犲叆鏁扮粍锛屽垯鍙鍑烘渶鍚庝竴椤广€?/p>

鎬荤粨

浠婂ぉ鎴戜滑璁ㄨ浜唚ebpack4鐨勪袱椤归厤缃?/p>

• mode妯″紡

• entry 鍏ュ彛

鏄庡ぉ缁х画锛屼笉瑙佷笉鏁?/p>

绂忓埄

闃呰鍘熸枃鏌ョ湅鍙傝€冮摼鎺?/span>

以上是关于的主要内容，如果未能解决你的问题，请参考以下文章

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

片段和活动之间的核心区别是啥？哪些代码可以写成片段？

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段6——CSS选择器

VSCode自定义代码片段——声明函数

VSCode自定义代码片段8——声明函数