初入webpack

开始学习webpack。这里记录一些踩坑笔记。

(webpack官网使用diff块显示文档修改看起来是真的舒适hhh)

从本质上来讲,webpack是一个现代的JavaScript应用的静态模块打包工具。在ES6之前,想要进行模块化开发的话,就必须借助于其他的工具,让我们可以进行模块化开发。在通过模块化开发完成了项目后,还需要处理模块之间的各种依赖,并且将其进行整合打包。浏览器能识别的JavaScript标准不多,像是之前提到的AMD,CMD,CommonJS标准都是不支持的,但是通过webpack的打包,就可以转化为浏览器可以识别的标准,当然,这个标准不是ES6。webpack还能帮助我们处理模块间的依赖关系,而且不仅仅是JavaScript文件,我们的CSS,图片,json文件等等在webpack中都可以被当作模块来使用。

如何理解打包操作?就是将webpack中的各种资源模块进行打包合并成一个或者多个包(Bundle)。并且在打包的过程中,还可以对资源进行处理,比如压缩图片,将scss转成css,ES6转成ES5,TS转成JS等等。

webpack依赖node.js运行环境。之前安装hexo的时候我的电脑已经装了node.js,所以这一步就直接跳过了。

不同版本的webpack之间的设置是不能通用的,我安装的是webpack4.41.5的版本,如果按在网上找到的基于webpack3.x的教程去做会导致各种报错。我安装完webpack之后,cmd提醒我命令不存在,我从everything里确认了一下webpack是安装成功的,遂想到可能是环境变量没有配,果然没有在path里面找到node_module/bin(已简写)目录,加入后,webpack可以正常被执行。

然后是无法生成对应的js,发现是缺少相应的文件,比如没有webpack.config.js,我就从别的地方加了个这个文件进去,然后xjb一通改设置,还是不行。有的还让我需要先npm init一下,它会创建一个node_modules文件夹,然后我输入上去,一路回车,文件也有了设置也有了,还是不行,最后我无奈干掉全部文件,按着官方文档从头开始。

(所以说提醒各位小伙伴,一定要优先选择与自己版本相对应的教程啊QAQ)

官方教程中使用到了一个叫做lodash的东西(加载艾什?),注意没有那个a,我第一次打成了loadash,安装的时候提示我这东西已经被弃用,让我用lodash,我没看到,以为没问题,结果执行npx webpack的时候还是出了毛病。执行命令之后给提供的信息一定要好好阅读啊。。

顺着官方文档的起步,这玩意总算是能跑起来了。最后启动webpack使用的不是npm命令,而是npx命令。npx会帮我执行依赖包里的二进制文件,npx会自动查找当前依赖包中的可执行文件,如果找不到就去PATH里面找。

我简单记录一下官方文档中给出的提示。

注意,当在 windows 中通过调用路径去调用 webpack 时,必须使用反斜线()。例如 node_modules\.bin\webpack --config webpack.config.js

如果 webpack.config.js 存在,则 webpack 命令将默认选择使用它。我们在这里使用 --config 选项只是向你表明,可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用。

package.json里面加入一个npm脚本,就可以用npm run build命令来代替之前使用的npx命令,按照官方解释,这是大多数基于 npm 的项目遵循的标准,因为它允许所有贡献者使用同一组通用脚本。

通过向 npm run build 命令和你的参数之间添加两个中横线,可以将自定义参数传递给 webpack,例如:npm run build -- --colors

在设置字体的时候,发现.ttf格式上传上去并不识别,需要转换成.woff或者.woff2格式。

设定HtmlWebpackPlugin出现了一大连串的问题,各种模块找不到。

先到这吧。

参考资料

https://www.jianshu.com/p/42e11515c10f

https://www.webpackjs.com/guides/getting-started/

https://www.runoob.com/w3cnote/webpack-tutorial.html

https://zhuanlan.zhihu.com/p/27840803

打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  • © 2018-2020 Shawn Zhou
  • Powered by Hexo Theme Ayer
  • PV: UV:

感谢打赏~

支付宝
微信