[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)