1堵未、使用快捷安裝時(shí),文件夾的名字不能是webpack，否則在安裝webpack時(shí)，會(huì)報(bào)錯(cuò) Refusing to install package with name "webpack" under a package 因?yàn)榕cwebpack項(xiàng)目重名了?
?2、設(shè)置mode?
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. ?
npx webpack --mode development?
3、__dirname? Node.js 中掂名，__dirname?總是指向被執(zhí)行 js 文件的絕對(duì)路徑，所以當(dāng)你在?/d1/d2/myscript.js?文件中寫(xiě)了?__dirname啃炸， 它的值就是?/d1/d2?铆隘。 相反，./?會(huì)返回你執(zhí)行 node 命令的路徑南用，例如你的工作路徑膀钠。 有一個(gè)特殊情況是在?require()?中使用?./?時(shí)，這時(shí)的路徑就會(huì)是含有?require()?的腳本文件的相對(duì)路徑裹虫。?
?4肿嘲、path.resolve 需要注意的是：如果在處理完所有給定的 path 片段之后還未生成絕對(duì)路徑，則再加上當(dāng)前工作目錄筑公。?
?5雳窟、?npm run build?代替npx webpack 通過(guò)向?npm run build?命令和你的參數(shù)之間添加兩個(gè)中橫線，可以將自定義參數(shù)傳遞給 webpack匣屡，例如：npm run build -- --colors封救。 ?
6、安裝webpack-cli之前捣作，要先安裝webpack npm install -D 安裝到dev開(kāi)發(fā)環(huán)境?
7誉结、解析css文件，使用style-loader和css-loader 在依賴于此樣式的文件中引入?import './style.css'券躁。當(dāng)該模塊運(yùn)行時(shí)惩坑，含有 CSS 字符串的?<style>?標(biāo)簽掉盅，將被插入到 html 文件的?<head>?中，最終是以style的方式引入?
8以舒、解析圖片和字體圖標(biāo) file-loader 和 url-loader 可以接收并加載任何文件趾痘，然后將其輸出到構(gòu)建目錄 如何使用圖標(biāo)字體?
9、CleanWebpackPlugin?--清除dist文件夾上一次的打包文件蔓钟，報(bào)錯(cuò)CleanWebpackPlugin is not a constructor 用法改變
const?{?CleanWebpackPlugin?}?=?require('clean-webpack-plugin')?
?new?CleanWebpackPlugin()?
http://www.reibang.com/p/0e99366ce796?
------------------------------------------ 進(jìn)階 ------------------------------------------?
10永票、模塊熱更新（?HMR） 它允許在運(yùn)行時(shí)更新各種模塊，而無(wú)需進(jìn)行完全刷新
?11奋刽、tree shaking?是一個(gè)術(shù)語(yǔ)瓦侮，通常用于描述移除 JavaScript 上下文中的未引用代碼(dead-code) 在package.json中設(shè)置?"sideEffects":?false 在webpack.config.js中設(shè)置mode:?'production' ?
12、uglifyjs-webpack-plugin報(bào)錯(cuò)佣谐，uglifyjs是js文件壓縮插件?
????1） 解決方案：重裝webpack webpack-cli，然后在重裝uglifyjs-webpack-plugin http://www.reibang.com/p/07a58c04be10?
?????2）ERROR in bundle.js from UglifyJs Unexpected token: keyword ?const? [bundle.js:100,2]?
????解決方案：將es6轉(zhuǎn)換成es5?
?????https://www.cnblogs.com/wangzisheng/p/9101467.html?
????3）可以使用快捷方式替代 --optimize-minimize?標(biāo)記將在后臺(tái)引用?UglifyJSPlugin?
?13方妖、Split CSS狭魂，將style文件單獨(dú)分離出來(lái)，使用extract-text-webpack-plugin@next組件 https://www.webpackjs.com/plugins/extract-text-webpack-plugin/ http://www.reibang.com/p/e244c92f8292?
?1）報(bào)錯(cuò)Tapable.plugin is deprecated. Use new API on `.hooks` instead党觅，extract-text-webpack-plugin目前版本不支持webpack4?
?2）報(bào)錯(cuò)：CssSyntaxError (2:1) Unknown word loader的引入順序雌澄，
?use:?['style-loader',?'css-loader']?
3）報(bào)錯(cuò)：document is not defined style-loader和extract-text-webpack-plugin組件只能二選一，正確的配置如下?
?{ ????????????????
????????test:?/\.css$/, ????????????????
????????use:?ExtractTextPlugin.extract({ ????????????????????
????????????????use:?['css-loader'], ????????????????????
????????????????fallback:?'vue-style-loader' ???????????????
?????????})? ? ? ? ? ? ?
}?
14杯瞻、報(bào)錯(cuò)webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead?
解決：將公共的依賴模塊提取到已有的入口 chunk 中镐牺，webpack4用法有更新?
?https://blog.csdn.net/github_36487770/article/details/80228147?
15、懶加載就是按需加載魁莉，在第一次調(diào)用時(shí)睬涧，加載某個(gè)模塊 使用這種方法實(shí)現(xiàn)懶加載:：import(/*?webpackChunkName:?'print'?*/?'./print').then(module?=>?{}?
16、緩存 使用緩存的原因：如果我們?cè)诓渴鹦掳姹緯r(shí)不更改資源的文件名旗唁，瀏覽器可能會(huì)認(rèn)為它沒(méi)有被更新畦浓，就會(huì)使用它的緩存版本 重新編譯時(shí)，只有內(nèi)容改變和引用改變內(nèi)容模塊的模塊hash值會(huì)改變?
?17检疫、提取模板 用webpack打包node_modules里的插件 https://www.cnblogs.com/xieqian/p/10973039.html?
?18讶请、創(chuàng)建library？屎媳？夺溢？?
19、shimming（填隙）：處理不符合規(guī)范的模塊的方法 ?
1）polyfill（多邊形填充）： Polyfilling 是由 RemySharp 提出的一個(gè)術(shù)語(yǔ)烛谊，它是用來(lái)描述復(fù)制缺少的 API 和API 功能的行為 Polyfill是一個(gè)js庫(kù)风响，主要撫平不同瀏覽器之間對(duì)js實(shí)現(xiàn)的差異 2）imports-loader,exports-loader使用方法？晒来？钞诡？郑现？?
?20、安裝webpack-cli時(shí)報(bào)錯(cuò)：Cannot find module 'webpack-cli'?
解決方案： npm install webpack-cli -g?
?21荧降、PWA：類似小程序的無(wú)需安裝接箫，即用即走的新技術(shù)，谷歌開(kāi)發(fā)?
22朵诫、開(kāi)啟CSP網(wǎng)頁(yè)安全政策防止XSS（跨站腳本攻擊）攻擊 https://www.cnblogs.com/leaf930814/p/7368429.html ?
23辛友、vagrant是一個(gè)工具，用于創(chuàng)建和部署虛擬化開(kāi)發(fā)環(huán)境的 ?
24剪返、根據(jù)udms-web項(xiàng)目废累，搭建一個(gè)vue項(xiàng)目 包含功能：?
????1）打包時(shí)，可以根據(jù)文件類型放到對(duì)應(yīng)的文件夾中 js文件放到j(luò)s文件夾下： ?output:?{ ????????filename:?'js/app.js' ????},?
????2）清空dist下的文件脱盲，除了用clean-webpack-plugin邑滨，還可以用rimraf插件
?????3）安裝vue-loader后報(bào)錯(cuò)，vue-loader的版本降低為14.2.4 vue-loader requires @vue/compiler-sfc to be present in the dependency tree ?
解決：https://blog.csdn.net/weixin_38098195/article/details/80630958?
?4）熱更新時(shí)钱反，出現(xiàn)錯(cuò)誤：Cannot GET / https://segmentfault.com/q/1010000012720634/ https://blog.csdn.net/a2013126370/article/details/88249664?
注意點(diǎn)：HtmlWebpackPlugin插件的filename必須是index.html才會(huì)自動(dòng)打開(kāi)頁(yè)面?
?5）htmlWebpackPlugin插件?
? ? ?a）詳解 https://www.cnblogs.com/wonyun/p/6030090.html?
? ? b）template 視口掖看？？ http-equiv="X-UA-Compatible" https://blog.csdn.net/changjiangbuxi/article/details/26054755?
6）webpack的分包策略 http://www.reibang.com/p/23dcabf35744?
7）webpack-cdn-plugin：webpack中使用CDN?
http://www.reibang.com/p/86602494dbb7?
?http://www.reibang.com/p/9248db0349fb?
8）webpack 的 runtime 和?manifest面哥，管理所有模塊的交互哎壳。 runtime：webpack模塊交互時(shí)的邏輯 manifest：webpack標(biāo)記模塊間關(guān)系的數(shù)據(jù)?
?runtime 和 manifest 的注入在每次構(gòu)建都會(huì)發(fā)生變化?
?分離manifest?
?const productionConfig = merge([ ... { optimization: { splitChunks: { ... }, runtimeChunk: { name: "manifest", }, }, }, ... ]);?
9) options/query provided without loader (use loader + options) options用法有誤 解決：
??module:?{ ????????
????????rules:?[ ????????????
????????????????????????{ ????????????????
????????????????????????????????test:?/\.js|jsx$/, ????????????????
????????????????????????????????use:?{ ???????????????????????
?????????????????????????????????????????????loader:?'babel-loader', ???????????????????????
?????????????????????????????????????????????options:?{ ????????????????????????????
????????????????????????????????????????????????????presets:?['react',?'es2015'],?//加載react和es2015的包 ????????????????????????????????????????????????????plugins:?['react-html-attrs']?//添加組件的插件配置? ? ? ? ? ? ? ? ? ? ? ?
????????????????????????????????????????????????} ????????????????????
????????????????????????????????????????} ?????????????????, ????????????
????????????????????????????????????????exclude:?/(node_modules)/ ???????????
?????????????????????????????????????}, ???????????
?????????????????????????????????????{?test:?/\.css$/,?loader:?'style-loader!css-loader'?} ??????
??????????????????????????] ????},?
?https://www.cnblogs.com/BetterMan-/p/9867642.html?
?10）ReferenceError: Unknown plugin "react-html-attrs" specified in "base" at 0 未安裝babel-plugin-react-html-attrs?
?11）Module not found: Error: Can't resolve 'object-assign'
