Code Monkey home page Code Monkey logo

dive-into-webpack's Introduction

在线阅读《深入浅出 Webpack》

内容简介

本书是国内第一本系统全面讲解 Webpack 的图书,涵盖了 Webpack 的入门、配置、实战、优化、原理。

  • 第1章教你从0开始学会使用 Webpack;
  • 第2章详细的讲解了 Webpack 提供的常用配置项;
  • 第3章结合实际项目中常见的场景给出最佳实践;
  • 第4章罗列出了各种优化 Webpack 的手段;
  • 第5章剖析了 Webpack 原理以及如何开发 Plugin 和 Loader。

除了深入讲解 Webpack,本书还附带介绍了 ES6、TypeScript、PostCSS、Prepack、离线缓存、单页应用、CDN 等 Web 开发相关的技能。

无论是对 Webpack 一无所知的初学者,还是经验丰富的工程师,相信都能通过本书进一步提高对 Webpack 的理解,让你在 Web 开发中更加熟练的运用 Webpack。

评价

Webpack 凭借强大的功能与良好的使用体验,已经成为目前最流行,社区最活跃的打包工具,是现代 Web 开发必须掌握的技能之一。作者结合自身的实战经验,介绍了 Webpack 的使用与常见优化方法、并深入讲解了 Webpack 原理与架构,相信各阶段的 Webpack 用户都能通过本书得到启发。

-- LeanCloud 联合创始人/CEO 江宏

本书的内容包含多个主题,Webpack 的用法、配置、使用场景等都有涉及,并且提供所有示例的源码,可以补充 Webpack 官方文档。

-- 阮一峰(著名技术博客《ES6 标准入门》的作者)

我手边需要这样一本书,内容涵盖Webpack,或者说涵盖现代前端技术基础、构建与优化的方方面面。如果你已经上手 Webpack,那么本书将带领你进一步学习,真正掌握 Webpack!

-- 陆金所前端架构师、前端外刊评论站长 寸志

版权许可

电子工业出版社持有本书全媒体形式的出版发行权利。

吴浩麟拥有本书的著作权。

其它人不能将本书用于商用用途,不能转载,不能以任何形式发行,违者将追究法律责任

dive-into-webpack's People

Contributors

actions-user avatar gwuhaolin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

dive-into-webpack's Issues

webpack是如何原生支持监听文件变化并自动刷新网页的

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

[typo] 3-1 低端浏览器

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

可改成

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

提个小小的建议

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

4-16优化总结运行起来会报错

直接运行起来报错:
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

[typo] 3-1 行重复

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

请问书上第23页里面的那个loaders是怎么个用法

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

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

[typo] 5-3 但..时,..时

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 对应文件的处理结果。

发现个错别字

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

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

‘在‘字用错了,应该是

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

书中的错误

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

[typo] 5 一个的功能

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

删除一个的功能中的

1-4的内容有所疑惑

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

webpack4,重复打包,hash值不一致

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

[typo] 4-15 管道 重定向

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

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

[typo] 3-8 declarations

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

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

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

多了 (

[typo] 4-9 光速 网速

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

这个光速是网速还是带宽

动态entry有哪些应用场景呢?

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

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

[typo] 3-1 编译其

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

编译器

我觉得Flow不能算Javascript的超集

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

[typo] 4-5 watchOptions.poll

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

poll也是值越大,频率越小

3.10管理多页应用的问题

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

[typo] 4-8 UglifyJS2 配置

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

2-2的问题和疑惑

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

如何在线阅读

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

模块热替换notwork

在书的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()
}

关于tree shaking

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

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

第三章是不是可以删掉?

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

DllPlugin和DllReferencePlugin不能用在一个webpack.config.js文件中?

各自单独用,都非常好,但是当需要做一个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? }

vscode 怎么调试webpack?

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里的断点是灰色的
image
走不到断点

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.