webpack入门

为了让不支持es6语法的浏览器支持我们所写的代码,就需要使用webpack等打包工具将其编译转换。当然,最重要的是将各个模块组织封装起来。由于本人了解甚少,以下如有误漏,敬请指正。

安装

需要安装的模块:

起步

为了方便打包,应该创建webpack.config.js

src目录为开发目录,dist为生产目录

文件目录组织结构

package.json文件中新增:

在当前目录打开cmd

在dist目录中查看,会生成一个main.js文件,此文件则为生产环境所需的文件。

开发

在以上执行完成后,还有一个问题,以上除了使index.js文件的import转换为兼容语法外,其他的js代码不会改变,要使代码兼容则必须转换js代码。而且要在index.js使用import加载css,图片,字体等静态文件,还需要做配置。

先解决第二个问题:

安装以下loader模块:

然而,JSON 支持实际上是内置的,也就是说 import Data from ‘./data.json’ 默认将正常运行。

 

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注