webpack配置
一个打包工具
npm install --save-dev webpack : 安装Webpack
npm install webpack webpack-cli --save-dev :此工具用于在命令行中运行 webpack
webpack 开箱即用，可以无需使用任何配置文件。webpack 会假定项目的入口起点为 src/index.js ，然后会在 dist/main.js 输出结果，并且在生产环境开启压缩和优化。
在package.json文件中添加命令，然后通过npm run build即可运行打包
但是通常项目还需要继续扩展此能力，为此可以在项目根目录下创建一个 webpack.config.js 文件，然后 webpack 会自动使用它。
也可以根据特定情况使用不同的配置文件，则可以通过在命令行中使用 --config flag 修改此配置文件名称。
每个html页面都有一个入口点，单页面应用：一个入口起点；多页面应用：多个入口起点
mode?: "development" | "production" | "none";
。。。。。
（webpack 提供合理的默认值，但是还是可能会修改一些解析的细节）
条件的输入值由两种，
在条件中，对 resource 进行匹配的属性有 test / include / exclude / resource
在条件中，对 issuer 进行匹配的属性有 issuer
注：当使用多个条件属性时，需要同时满足，当属性条件为数组时，满足数据中的一个即可
可以对匹配规则的模块进行 应用loader 或者 解析选项对象
oneOf?: RuleSetRule[];
rules?: RuleSetRule[];
webpack配置示例：
绛旓細杩欓噷瑕佺壒鍒敞鎰弒cope锛岃繖鏄webpack閰嶇疆鐨勫閮ㄥ弬鏁颁笅鐨勪俊鎭傛瘮濡倂ue鐨勪綔鐢ㄥ煙鍚嶇О鏄疺ue锛寁ue-router鐨勪綔鐢ㄥ煙鍚嶇О鏄疺ueRouter锛宔lement-ui鐨勪綔鐢ㄥ煙鍚嶇О鏄痚lement銆傚悓鏍凤紝jq鐨勪綔鐢ㄥ煙鍚嶇О鏄疛Query銆傚叿浣撴柟娉曟槸鍏堝紩鍏ヨ繖涓祫婧愶紝鐒跺悗鍦ㄦ帶鍒跺彴涓緷娆¤緭鍏ヨ繎浼煎硷紝涓涓鍖归厤(鐩墠杩樻病鏈夋壘鍒版洿濂界殑鏂规硶)銆傛垜浠彲浠ュ湪webp...
绛旓細webpack 寮绠卞嵆鐢紝鍙互鏃犻渶浣跨敤浠讳綍閰嶇疆鏂囦欢銆倃ebpack 浼氬亣瀹氶」鐩殑鍏ュ彛璧风偣涓 src/index.js 锛岀劧鍚庝細鍦 dist/main.js 杈撳嚭缁撴灉锛屽苟涓斿湪鐢熶骇鐜寮鍚帇缂╁拰浼樺寲銆 鍦╬ackage.json鏂囦欢涓坊鍔犲懡浠わ紝鐒跺悗閫氳繃npm run build鍗冲彲杩愯鎵撳寘 浣嗘槸閫氬父椤圭洰杩橀渶瑕佺户缁墿灞曟鑳藉姏锛屼负姝ゅ彲浠ュ湪椤圭洰鏍圭洰褰曚笅鍒涘缓...
绛旓細閰嶇疆鍘熺悊(鏍规嵁package.json鏂囦欢閲岄潰閰嶇疆鐨凬ODE_ENV==鈥榩roduction鈥欐垨鑰呪檇evelopment鈥欏姞涓webpack.config.js閲岄潰鐨凞eserver.proxy璁剧疆鐨勪唬鐞唊ey鏉ラ厤缃紑鍙戞垨鑰呮寮忕幆澧冪殑url鍓嶇紑,閰嶅悎createBrowserHistory.basename璁剧疆) until.js (鍏敤鏂规硶鏂囦欢) index.js(鍏ㄥ眬寮曞叆,濡:utils.request銆丂babel/polyfill銆乤ssets/.peg銆佽矾鐢...
绛旓細4銆佹柟寮忎竴webpack閰嶇疆 webpack瀹夎鍙傝冨畨瑁 webpack 涓枃缃戠洿鎺ュ湪packagejson鍚岀骇鐩綍涓嬪垱寤哄垱寤轰竴涓獁ebpack鐨勯厤缃枃浠跺嵆鍙紝鐒跺悗鍦ㄩ厤缃枃浠跺唴杈撳叆鍐呭鏂瑰紡浜寁uecli閰嶇疆 vuecli鐩墠宸蹭笉銆5銆1鍏佽涓簐ue缁勪欢鐨勬瘡涓儴鍒嗕娇鐢ㄤ粬鐨剋ebpack loader锛屼緥濡傚湪style涓娇鐢╯ass锛屽湪template涓娇鐢≒ug 2鍏佽涓涓獀ue鏂囦欢涓...
绛旓細涓夈佸垵鎺 webpack 3.1 浣跨敤babel鎵撳寘es6 3.1.1 缂栬瘧 ES 6/7 Babel Babel Presets Babel Polyfill Babel Runtime Transform 渚嬪瓙 3.2 鎵撳寘 Typescript 閰嶇疆 tsconfig Typings 渚嬪瓙 3.3 鎻愬彇 js 鐨勫叕鐢ㄤ唬鐮 渚嬪瓙 image.png 3.4 浠ｇ爜鍒嗗壊鍜屾噿鍔犺浇 绗竴绉嶆柟寮忥細閫氳繃wepack鍐呯疆鏂规硶 绗簩绉嶆柟寮忥細...
绛旓細webpack鍏抽棴鐑洿鏂閰嶇疆鍙繖鏍锋搷浣滐細鍙湪webpack.dev.conf.js涓璬evServer{}娣诲姞inline锛歠alse鍏抽棴鐑洿鏂般傚湪Vue-cli宸ョ▼涓紝webpack鑷姩鍚姩浜嗙儹鏇存柊锛屽鏋滄槸澶氶〉闈㈠伐绋嬶紝褰撻〉闈㈠お澶氭椂锛屽惎鐢ㄧ儹鏇存柊鍙樻參锛屽彲鍦╳ebpack.dev.conf.js涓璬evServer{}娣诲姞inline锛歠alse鍏抽棴鐑洿鏂.
绛旓細module.rules 鐨剉alue鏄暟缁勶紝鍏佽浣犲湪 webpack 閰嶇疆涓寚瀹氬涓 loader銆俵oader 浠庡彸鍒板乏 锛堟垨 浠庝笅鍒颁笂 锛夊湴鍙栧(evaluate)/鎵ц(execute)銆傚湪涓嬮潰鐨勭ず渚嬩腑锛屼粠 sass-loader 寮濮嬫墽琛岋紝鐒跺悗缁х画鎵ц css-loader锛屾渶鍚庝互 style-loader 涓虹粨鏉熴傛煡鐪 loader 鍔熻兘 绔犺妭锛屼簡瑙ｆ湁鍏 loader 椤哄簭鐨...
绛旓細npm install --save-dev webpack 4.鎴戜滑闇瑕佷竴涓獁ebpack.config.js鏂囦欢锛岃褰webpack閰嶇疆淇℃伅銆傚畠鐨勯厤缃ぇ姒傝繖鏍凤細var webpack = require('webpack');var path = require('path');var buildPath = path.resolve(__dirname, 'build');var config = { //鍏ュ彛鏂囦欢 entry: { index : './src/...
绛旓細寮曞叆鐨刢ss濡備笅锛氬綋styles鍙橀噺鏈浣跨敤鏃讹紝webpack5鑷甫tree shaking浼樺寲锛屽鑷磗tyle.css涓嶄細琚墦鍖咃紝涔熷氨涓嶄細鐢熸晥锛岃В鍐虫柟娉曪細
绛旓細杩欓噷鐗瑰埆娉ㄦ剰scope锛屽畠鏄webpack閰嶇疆鐨別xternal鍙傛暟涓嬬殑淇℃伅锛屾瘮濡倂ue鐨勪綔鐢ㄥ煙鍛藉悕鏄疺ue锛寁ue-router鐨勪綔鐢ㄥ煙鍛藉悕鏄疺ueRouter锛宔lement-ui鐨勪綔鐢ㄥ煙鍛藉悕鏄疎LEMENT锛屽悓鐞嗭紝jq鐨勪綔鐢ㄥ煙鍛藉悕鏄疛Query锛 鍏蜂綋鍋氭硶鏄厛寮曞叆璇ヨ祫婧愶紝鐒跺悗鍦ㄦ帶鍒跺彴渚濇杈撳叆杩戜技鐨勫硷紝涓涓釜鍖归厤 (鐩墠娌℃壘鍒版洿濂界殑鍋氭硶)銆傚湪webpack鐑...
