[TOC] # Webpack 的概念 [Webpack 的概念](https://cyl.moe/post/webpack-concepts) # webpack的chunks和bundle是什么意思？ > https://segmentfault.com/q/1010000012164988 1. chunks 就是代碼塊/模塊的意思，有 name 的 chunk是在 entry 里配置了name 的，那些1，2，3，4啥的應該是用了 code splitting 配置生成的，數字是 chunk 的 id 2. 多個 chunk 合在一起就是 bundle，一個 bundle 可以理解為將多個 js 打包之后生成的一個大的 js 文件，而多個 bundle 里可能有公共的部分，或者一個 bundle 里的東西并不需要一次性加載，這個時候就需要按照路由，按需加載，拆分成不同的 chunk 3. 你的和官方的不一致，可能是因為你沒有用到 code splitting > 如果必須要給一個區分的話，通常我們在討論時，bundle 指的是所有模塊都打包進入的單個文件，而 chunk 指的是按照某種規則的模塊集合，chunk 的體積大于單個模塊，同時小于整個 bundle # devServer.publicPath、output.publicPath *`devServer.publicPath`* 的意義就是**決定外部能以怎樣的路徑通過 devServer來訪問構建在內存中的文件**，這個字段未顯式設定時，則會去沿用 `output.publicPath` 字段的顯式值（如果有的話，否則就用自己的 `default` 值）。 *`output.publicPath`* 的意義是**用來為構建的文件生成滿足特定需求的前綴，并將這個前綴提供給需要的 resolver、plugin 或者其他的配置字段**。 > [https://www.jianshu.com/p/7d43d45b3ebf](https://www.jianshu.com/p/7d43d45b3ebf) # 在多個文件中import同一個文件，webpack會多次打包嗎 react項目，單頁面應用。為了便于管理，將不同欄目的jsx文件分成 `a/b/c` 三個文件，用import來引入到主入口。可是 `a/b/c` 文件，都引入了公用組件d。 已經使用了 `webpack.optimize.CommonsChunkPlugin`， 最終打包出來的代碼里面，d重復引用嗎？代碼量已經減少了嗎？ *** **答案**：公用組件 d 不會重復，webpack 在處理依賴關系的時候，會給模塊分配個 id，同一模塊只會寫入打包文件一次 —— 這里針對的是單頁應用。 另外，`webpack.optimize.CommonsChunkPlugin` 是用于提取公共模塊到單獨文件用的。 > [在多個文件中import同一個文件，webpack會多次打包嗎](https://segmentfault.com/a/1190000008521430) > [Webpack用import引入公用模塊會重復打包嗎](http://react-china.org/t/webpack-import/9050) # 別名配置 根據 [sass-loader](https://github.com/webpack-contrib/sass-loader#resolving-import-at-rules) 處理 `import `的方式，如果要使用 Webpack 中定義的`alias`，就要在路徑前面加一個`~`。 在引入文件的時候需要在前面加上`~`，因為`~/`解析到主目錄，`~bootstrap/dist/css/bootstrap`就會根據 Webpack 中定義的`alias` 解析到 別名`bootstrap`目錄下，沒有就解析到 `node_modules/bootstrap`下。`css/less/sass`沒有用于導入相關文件的特殊語法。寫入`@import“file”`與`“import”./file`就是相同的。 > [stylus 為啥要加入 ~ @import '~common/stylus/mixin']( https://blog.csdn.net/kiven_wolf/article/details/78320104 ) > [webpack中的css引入文件需要用~@的形式，為什么？](https://juejin.im/post/5bf532a1518825741f626355) > [vue項目中 路徑使用的@和~的區別](https://blog.csdn.net/caseywei/article/details/90697164) # vue webpack 的配置 ``` function resolve (dir) { return path.join(__dirname, dir) } resolve: { // 自動補全的擴展名 extensions: ['.js', '.vue', '.json', '.scss'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), '@components': resolve('src/components'), '@myComponents': resolve('src/myComponents'), '@sass': resolve('src/sass'), '@assets': resolve('src/assets') } } ``` # 忽略動態的 require ## 錯誤描述 在 webpack 中有兩種常見的動態的 require： 1. 部分動態，例如以一段路徑開頭進行加載 2. 完全動態，例如在運行時（如環境變量或`cwd`指定）決定加載路徑 webpack 將編譯`require`，和 如下 import 動態導入模塊相同，不能做到完全的動態加載路由： ```js temp.component = () => import(`@/views/${menu.menuVueComponent}`) // 正確 temp.component = () => import(`${menu.menuVueComponent}`) // 不能加載 temp.component = () => import(menu.menuVueComponent) // 不能加載 ``` ## 解決方案 [生成一個不會被 webpack 解析的`require`函數](https://webpack.docschina.org/api/module-variables/#non_webpack_require-webpack-specific) ```js const requireFunc = typeof __webpack_require__ === 'function' ? __non_webpack_require__ : require ``` > [Webpack打包時出現require報錯問題](https://www.cnblogs.com/leona-d/p/12312754.html) > [如何在 webpack 和 Rollup 中忽略動態的 require](https://zhuanlan.zhihu.com/p/52990313) # VSCode 等編輯器感知`@` 項目目錄添加`jsonconfig.json`文件，內容如下，重啟 VScode。 ``` { "compilerOptions": { "target": "es2016", "sourceMap": true, "baseUrl": ".", "jsx": "react", "moduleResolution": "node", "paths": { "@/*": ["./src/*"] } }, "include": ["./src"], "exclude": ["node_modules", "build"] } ``` > [vscode中的 jsconfig.json](https://segmentfault.com/a/1190000018013282)