Kenny 的 webpack 学习之路（三）

最新推荐文章于 2021-05-12 10:01:57 发布

TangKenny

最新推荐文章于 2021-05-12 10:01:57 发布

阅读量332

点赞数

本文链接：https://blog.csdn.net/TangKenny/article/details/105626874

版权

代码分离

在这一章节的学习时，发现在第一个示例中，无论我怎么操作都会出现编译不通过的情况，而且在Mac和在Windows中都出现了相同的情况，

ERROR in ./src/another-module.js 1:9
Module parse failed: Unexpected token (1:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> import _ form 'lodash' ;
|
| console.log(
Child HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
       1 module
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! webpack-demo@1.0.0 build: `webpack --config webpack.config.js`
npm ERR! Exit status 2

这个地方一直会有一个 > import _ form 'lodash' ; 的错误，因为我使用的是目前最新的编译工具导致了这个重复引入的问题已经在编译阶段就可以发现了，但是蛋疼的是这个提示不是提示一个重复引入的异常。

动态导入

对于动态导入的文件，会作为一个单独的模块，文中的示例和最新的版本也会稍有差别：

lodash.bundle.js   541 kB       0  [emitted]  [big]  lodash

vendors~lodash.bundle.js    548 KiB  vendors~lodash  [emitted]  vendors~lodash

缓存

当看到缓存的时候，浏览了一遍代码，发现中文版文档不太适合比较新的版本了，文中代码分离使用了 CommonsChunkPlugin 这个插件，但是这个插件在现行版本中已经被弃用了，要学习这一章节的内容只能读英文版的文档了。

创建library

作为一个新手学习阶段应该暂时还不会应用到这一块的内容，短时间内估计也不会产生开发公共组件库的情况。

shimming

一些第三方的库(library)可能会引用一些全局依赖（例如 jQuery 中的 $）。这些库也可能创建一些需要被导出的全局变量。不管愿意不愿意，jQuery 几乎是一个不可避免的问题，因为绝大部分的应用都会多多少少的有一些jQuery的代码。
安装jQuery 依赖

npm install jquery

使用ProvidePlugin自动引入jquery

 new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
 })

渐进式网络应用

所生成的文件中并没有文中提到的 sw.js 文件, 而是多出了其他几个文件

              service-worker.js   3.69 KiB           [emitted]
          service-worker.js.map   2.42 KiB           [emitted]
            workbox-4dbac9ba.js   69.5 KiB           [emitted]
        workbox-4dbac9ba.js.map    116 KiB           [emitted]

看着应该是成功了，查看下英文版的文档是怎么写的，果然，英文版的文档是写的 service-worker.js