1、使用快捷安裝時,文件夾的名字不能是webpack，否則在安裝webpack時，會報錯 Refusing to install package with name "webpack" under a package 因為與webpack項目重名了?
?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 文件的絕對路徑，所以當你在?/d1/d2/myscript.js?文件中寫了?__dirname， 它的值就是?/d1/d2?。 相反，./?會返回你執(zhí)行 node 命令的路徑，例如你的工作路徑。 有一個特殊情況是在?require()?中使用?./?時，這時的路徑就會是含有?require()?的腳本文件的相對路徑。?
?4、path.resolve 需要注意的是：如果在處理完所有給定的 path 片段之后還未生成絕對路徑，則再加上當前工作目錄。?
?5、?npm run build?代替npx webpack 通過向?npm run build?命令和你的參數(shù)之間添加兩個中橫線，可以將自定義參數(shù)傳遞給 webpack，例如：npm run build -- --colors。 ?
6、安裝webpack-cli之前，要先安裝webpack npm install -D 安裝到dev開發(fā)環(huán)境?
7、解析css文件，使用style-loader和css-loader 在依賴于此樣式的文件中引入?import './style.css'。當該模塊運行時，含有 CSS 字符串的?<style>?標簽，將被插入到 html 文件的?<head>?中，最終是以style的方式引入?
8、解析圖片和字體圖標 file-loader 和 url-loader 可以接收并加載任何文件，然后將其輸出到構(gòu)建目錄 如何使用圖標字體?
9、CleanWebpackPlugin?--清除dist文件夾上一次的打包文件，報錯CleanWebpackPlugin is not a constructor 用法改變
const?{?CleanWebpackPlugin?}?=?require('clean-webpack-plugin')?
?new?CleanWebpackPlugin()?
http://www.itdecent.cn/p/0e99366ce796?
------------------------------------------ 進階 ------------------------------------------?
10、模塊熱更新（?HMR） 它允許在運行時更新各種模塊，而無需進行完全刷新
?11、tree shaking?是一個術(shù)語，通常用于描述移除 JavaScript 上下文中的未引用代碼(dead-code) 在package.json中設(shè)置?"sideEffects":?false 在webpack.config.js中設(shè)置mode:?'production' ?
12、uglifyjs-webpack-plugin報錯，uglifyjs是js文件壓縮插件?
????1） 解決方案：重裝webpack webpack-cli，然后在重裝uglifyjs-webpack-plugin http://www.itdecent.cn/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?標記將在后臺引用?UglifyJSPlugin?
?13、Split CSS，將style文件單獨分離出來，使用extract-text-webpack-plugin@next組件 https://www.webpackjs.com/plugins/extract-text-webpack-plugin/ http://www.itdecent.cn/p/e244c92f8292?
?1）報錯Tapable.plugin is deprecated. Use new API on `.hooks` instead，extract-text-webpack-plugin目前版本不支持webpack4?
?2）報錯：CssSyntaxError (2:1) Unknown word loader的引入順序，
?use:?['style-loader',?'css-loader']?
3）報錯：document is not defined style-loader和extract-text-webpack-plugin組件只能二選一，正確的配置如下?
?{ ????????????????
????????test:?/\.css$/, ????????????????
????????use:?ExtractTextPlugin.extract({ ????????????????????
????????????????use:?['css-loader'], ????????????????????
????????????????fallback:?'vue-style-loader' ???????????????
?????????})? ? ? ? ? ? ?
}?
14、報錯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)用時，加載某個模塊 使用這種方法實現(xiàn)懶加載:：import(/*?webpackChunkName:?'print'?*/?'./print').then(module?=>?{}?
16、緩存 使用緩存的原因：如果我們在部署新版本時不更改資源的文件名，瀏覽器可能會認為它沒有被更新，就會使用它的緩存版本 重新編譯時，只有內(nèi)容改變和引用改變內(nèi)容模塊的模塊hash值會改變?
?17、提取模板 用webpack打包node_modules里的插件 https://www.cnblogs.com/xieqian/p/10973039.html?
?18、創(chuàng)建library？？？?
19、shimming（填隙）：處理不符合規(guī)范的模塊的方法 ?
1）polyfill（多邊形填充）： Polyfilling 是由 RemySharp 提出的一個術(shù)語，它是用來描述復(fù)制缺少的 API 和API 功能的行為 Polyfill是一個js庫，主要撫平不同瀏覽器之間對js實現(xiàn)的差異 2）imports-loader,exports-loader使用方法？？？？?
?20、安裝webpack-cli時報錯：Cannot find module 'webpack-cli'?
解決方案： npm install webpack-cli -g?
?21、PWA：類似小程序的無需安裝，即用即走的新技術(shù)，谷歌開發(fā)?
22、開啟CSP網(wǎng)頁安全政策防止XSS（跨站腳本攻擊）攻擊 https://www.cnblogs.com/leaf930814/p/7368429.html ?
23、vagrant是一個工具，用于創(chuàng)建和部署虛擬化開發(fā)環(huán)境的 ?
24、根據(jù)udms-web項目，搭建一個vue項目 包含功能：?
????1）打包時，可以根據(jù)文件類型放到對應(yīng)的文件夾中 js文件放到j(luò)s文件夾下： ?output:?{ ????????filename:?'js/app.js' ????},?
????2）清空dist下的文件，除了用clean-webpack-plugin，還可以用rimraf插件
?????3）安裝vue-loader后報錯，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）熱更新時，出現(xiàn)錯誤：Cannot GET / https://segmentfault.com/q/1010000012720634/ https://blog.csdn.net/a2013126370/article/details/88249664?
注意點：HtmlWebpackPlugin插件的filename必須是index.html才會自動打開頁面?
?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.itdecent.cn/p/23dcabf35744?
7）webpack-cdn-plugin：webpack中使用CDN?
http://www.itdecent.cn/p/86602494dbb7?
?http://www.itdecent.cn/p/9248db0349fb?
8）webpack 的 runtime 和?manifest，管理所有模塊的交互。 runtime：webpack模塊交互時的邏輯 manifest：webpack標記模塊間關(guān)系的數(shù)據(jù)?
?runtime 和 manifest 的注入在每次構(gòu)建都會發(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'
