gwuhaolin / dive-into-webpack Goto Github PK

this.loadModule：但 Loader 在处理一个文件时，如果依赖其它文件的处理结果才能得出当前文件的结果时， 就可以通过 this.loadModule(request: string, callback: function(err, source, sourceMap, module)) 去获得 request 对应文件的处理结果。
可改成
this.loadModule：当 Loader 在处理一个文件时，如果依赖其它文件的处理结果才能得出当前文件的结果， 可以通过 this.loadModule(request: string, callback: function(err, source, sourceMap, module)) 去获得 request 对应文件的处理结果。

电子书版中 文末提到了 如下一段代码
require('style-loader!css-loader?minimize!./main.css');
那原有的config应该做如何变更呢0 0

比如：http://webpack.wuhaolin.cn/2%E9%85%8D%E7%BD%AE/2-9%E5%A4%9A%E7%A7%8D%E9%85%8D%E7%BD%AE%E7%B1%BB%E5%9E%8B.html
"需要写量个文件"

"量个" 应该是 "两个"

各自单独用，都非常好，但是当需要做一个Dll, 又依赖别的Dll的时候，只能DllPlugin和DllReferencePlugin写在一个webpack.config.js文件中，但这时报错：
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration.module has an unknown property 'strictThisContextOnImports'. These properties are valid:
  object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, loaders?, noParse?, rules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence? }
  Options affecting the normal modules (NormalModuleFactory).
• configuration.output has an unknown property 'chunkLoadTimeout'. These properties are valid:
  object { auxiliaryComment?, chunkFilename?, crossOriginLoading?, devtoolFallbackModuleFilenameTemplate?, devtoolLineToLine?, devtoolModuleFilenameTemplate?, filename?, hashDigest?, hashDigestLength?, hashFunction?, hotUpdateChunkFilename?, hotUpdateFunction?, hotUpdateMainFilename?, jsonpFunction?, library?, libraryTarget?, path?, pathinfo?, publicPath?, sourceMapFilename?, sourcePrefix?, strictModuleExceptionHandling?, umdNamedDefine? }
  Options affecting the output of the compilation. output options tell webpack how to write the compiled files to disk.
• configuration.resolve has an unknown property 'cacheWithContext'. These properties are valid:
  object { alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
• configuration.resolveLoader has an unknown property 'cacheWithContext'. These properties are valid:
  object { alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }

watchOptions.aggregateTimeout 值越大性能越好，因为这能降低重新构建的频率。
watchOptions.poll 值越小越好，因为这能降低检查的频率。

poll也是值越大，频率越小

http://webpack.wuhaolin.cn/4%E4%BC%98%E5%8C%96/4-3%E4%BD%BF%E7%94%A8HappyPack.html

看了开发者工具也没有关闭按钮，控制台倒是有报错：

Uncaught TypeError: Cannot read property 'split' of undefined
    at c (theme.js:4)
    at l (theme.js:4)
    at HTMLDivElement.f (theme.js:4)
    at HTMLDivElement.dispatch (theme.js:2)
    at HTMLDivElement.m.handle (theme.js:2)

现在先把dialog的js屏蔽了

首先感谢作者的贡献。
作者在文中写到：
“Flow
Flow 也是 JavaScript 的一个超集，它的主要特点是为 JavaScript 提供静态类型检查，和 TypeScript 相似但更灵活，可以让你只在需要的地方加上类型检查。“
我觉得Flow不能算Javascript的超集吧，就像Flow官网上写到的：“Flow： A Static Type Checker For Javascript“

直接运行起来报错：
ERROR in ./src/pages/index/index.js
Module not found: Error: Can't resolve 'antdliutton' in 'G:\下载\4-16优化总结\src\pages\index'
@ ./src/pages/index/index.js 11:0-37
@ multi ./src/pages/index

ERROR in ./src/pages/index/index.js
Module not found: Error: Can't resolve 'antdliuttonstyleindex.css' in 'G:\下载\4-16优化总结\src\pages\index'
@ ./src/pages/index/index.js 12:0-41
@ multi ./src/pages/index

ERROR in ./src/pages/login/index.js
Module not found: Error: Can't resolve 'antdlibinput' in 'G:\下载\4-16优化总结\src\pages\login'
@ ./src/pages/login/index.js 11:0-35
@ multi ./src/pages/login

ERROR in ./src/pages/login/index.js
Module not found: Error: Can't resolve 'antdlibinputstyleindex.css' in 'G:\下载\4-16优化总结\src\pages\login'
@ ./src/pages/login/index.js 12:0-40
@ multi ./src/pages/login

此处应该是每秒 1 次
https://webpack.js.org/configuration/watch/#watchoptions-poll

// 默认每1000豪秒去问1次

可改成： 默认(查询|轮询)间隔是1000ms

了解 Webpack 整体架构、工作流程，学会区分一个的功能的实现是通过 Loader 合适还是 Plugin 更合适：

删除一个的功能中的的

大佬~ 想问下webpack4的问题。
最近从webpack2.x升级到webpack4.4.1，发现我打包同样的一份代码，生成的hash值是不一样的。难道webpack4.x之后的hash跟时间有关吗？？？怎么才能打包同样的代码生成一样的hash值。

webpack 正确的拼写方式，首字母 w 是小写，这是官方指定的拼写，希望能修正下这个问题。

CDN 其实是通过优化物理链路层传输过程中的**光速**有限、丢包等问题来提升网速的，

这个光速是网速还是带宽

在4.10.2，接入tree shaking中,作者讲到了需要修改.bablerc文件,以让babel保留es6的模块化语句。因为使用tree shaking 的前提就是一定要在模块中使用es6的模块化语句，如果babel将模块化语句转换成es5的语法,则tree shaking 不会像预期的那样工作。

我亲自试了一下,本地并没有.babelrc文件，是一样可以进行tree shaking的，可能是因为webpack的版本问题，我使用的是3.10.0

test: /.js$/,

应该是ts

test: /.ts$/,

TypeScript 编译其会有和在 3-1 使用ES6语言中 Babel 一样的问题：

编译器

webpack 4 里将命令行相关代码迁移出去了，所以需要安装其中之一。根据网上相关资料，选择webpack-command.命令行输入 npm install webpack-command -g . 此时执行webpack命令可成功。

书里的代码很多已经在4.0的环境下，跑不起来了

假如项目里有多个页面需要为每个页面的入口配置一个 Entry ，但这些页面的数量可能会不断增长，则这时 Entry 的配置会受到到其他因素的影响导致不能写成静态的值。其解决方法是把 Entry 设置成一个函数去动态返回上面所说的配置

能详细讲讲有哪些原因导致不能写成静态的值吗？搜关键字“webpack 动态entry”也没找到。

webpack --profile --json 会输出字符串形式的 JSON，> stats.json 是 UNIX/Linux 系统中的管道命令、含义是把 webpack --profile --json 输出的内容通过管道输出到 stats.json 文件中。

这里>解释为重定向更合适些

1、你好，最近阅读了你的书。发现里面关于output.libraryTarget = "global" 的说法：『编写的库将通过window赋值給指定的名称』。是不是有问题？
2、另外，不太明白为什么CommonJS2 要在CommonJS上增加一个module。这个很困惑

可以用mini-css-extract-plugin替代

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/webpack/bin/webpack.js"
    }
  ]
}

F5启动后 webpack.config.js里的断点是灰色的

走不到断点

这类单页应用要求服务器在针对任何命中的路由时都返回一个对应的 HTML 文件，

这会导致任何请求都会返回 index.html 文件，

前端使history api时，服务端的配置应该是对应未命中的情况才返回index.html

具体判断规则connect-history-api-fallback

最近买了这本书，在看到第一章1.6 使用DevServer的时候，看到作者说，webpack元亨支持监听文件的变化并自动刷新网页,做到实时预览。对于webpack原生支持监听文件变化并自动构建,这个是没有疑问的，只需要一个--watch就可以了。但是对于webpack原生支持自动刷新网页,我不知道具体怎么做,在网上找了一通,发现基本上都是webpack-dev-server通过websocket实现devServer与client通信实现刷新页面,或者是通过MHR模块热加载的方式实现实时预览。很明显，我认为通过webpack-dev-server实现的方式都不是webpack原生支持的,所以我在这里想问一下作者,webpack是怎样原生支持自动刷新网页的

在书的1.6.2这一节，书中说:要开启模块热替换，我们只需在启动DevServer时带上--hot参数,重启DeverServer后再去更新文件就能体验到模块热替换的神奇了。
我按照书中所说，做了一遍，发现页面没有更新
在浏览器的console中得到了如下信息

[WDS] App updated. Recompiling...
[WDS] App hot update...

看到hot update，我知道已经进行热更新了，问题是页面内容的更新是通过重新加载页面实现的。需要在入口文件中加入以下代码，但是关于这一点，作者却没有加上

if(module.hot){
  module.hot.accept()
}

另外，我觉得作者应该提醒一下读者,在启动DevServer的时候加上--hot参数,实际上与在webpack.config.js中加上这句的效果是一样的:

const webpack = require('webpack')
plugins:[
  new webpack.HotModuleReplacement()
]

综上，一句话,要实现模块热替换功能有两种实现途径:
1、在npm 的scripts里面启动DevServer的时候手动加上--hot参数
2、在webpack.config.js中加入这句:

const webpack = require('webpack')
plugins:[
  new webpack.HotModuleReplacement()
]

做完了以上任意的配置后，还需要在入口文件加上

if(module.hot){
  module.hot.accept()
}

2.6.2中有提到:如果想使用DevServer的模块热替换机制,去实现实时预览,则最方便的方法是直接开启inline,这句话应该是有问题的,inline是通过websocket的方式实现的网页刷新,而不是模块热替换

es2017 包含在2017里加入的新特性；
es2017 包含在2017里加入的新特性；

不能不star

你们怎么看👀

给新的 API 注入 polyfill ，例如使用新的 fetch API 时注入对应的 polyfill 后才能让低端浏览器正常运行。

可改成

给新的 API 注入 polyfill ，例如项目使用 fetch API 时，只有注入对应的 polyfill 后，才能在低版本浏览器中正常运行。

• 网址打不开了，还需要自己用gitbook 生成才能开

我想看电子书，可以通过付费开放gitbook 的阅读权限吗，买制作书比较麻烦。

module: {
    rules: [
      {
        // 用正则去匹配要用该 loader 转换的 CSS 文件
        test: /\.css$/,
        **loaders**: ExtractTextPlugin.extract({
          // 转换 .css 文件需要使用的 Loader
          use: ['css-loader'],
        }),
      }
    ]
  }

里面这个loaders跟之前的use是什么关系，有的时候你用use，有时候又是loaders，书里并没有说明这个loaders

不给看了？

1.6这里的获取bundle.js的正确URL：http://localhost:8080/bundle.js没有问题。同时index.html我修改了。
但是到1.6.1这里的第一段话说修改main.js保存后浏览器会自动刷新，运行出修改后的效果。我把main.js里面show方法的参数改了保存发现浏览器并没有刷新出修改的效果。不过保存的时候重新编译了。这是什么原因？求解

comments：是否保留代码中的注释，默认为保留，为了达到更好的压缩效果，可以设置为 false。

collapse_vars：是否内嵌定义了但是只用到一次的变量，例如把 var x = 5; y = x 转换成 y = 5，默认为不转换。为了达到更好的压缩效果，可以设置为 false。
reduce_vars： 是否提取出出现多次但是没有定义成变量去引用的静态值，例如把 x = 'Hello'; y = 'Hello' 转换成 var a = 'Hello'; x = a; y = b，默认为不转换。为了达到更好的压缩效果，可以设置为 false。

这里的默认值和UglifyJS2不一样
comments,collapse_vars,reduce_vars默认都优化了。

collapse_vars,reduce_vars 为了达到更好的压缩效果，可以设置为 false。,这里应该是true

3.10管理多页应用的问题
我下载了zip后只有build构建命令，想请教下开发环境需要怎样配置？

1-4使用Loader
该页最后一行，

这样就能指定对 ./main.css 这个文件先采用 css-loader 在采用 style-loader 转换。

‘在‘字用错了，应该是

先采用css-loader再采用style-loader转换

整个章节 都是include

第三章占用了大约100页来告诉读者怎样接各种loader,但是讲的又是一带而过的感觉，感觉意义不大，所以我觉得可以省略掉第三章。

如下图所示：

// 该 NgModule 所依赖的视图组件
declarations: [AppComponent],

declarations 应该是声明该模块的组件，指令和管道

其它配置保持和在(3.2 使用 TypeScript 语言的一致，

多了 （

加油。