编译配置

初始化ES6项目、安装环境和基于webpack的ES6编译配置

Webpack/babel安装,ES6编译配置,多入口JS编译生成,JS自动提取公用JS,ES6的自定义后缀,ES6转换为ES5、压缩发布配置

2018-05-18侠课岛    初级拔高       

前端/前端必修/搭建Webpack编译ES6环境 12     0     3551

本套课程将讲解如何用webpack来编译ES6,课程分为两节,第一节我们来安装ES6编译所需要的环境以及编译的配置,主要包括以下内容:

  1. 安装webpack和ES6编译环境

  2. 配置ES6编译

安装webpack编译环境

webpack编译环境主要就包括安装node和安装webpack,在侠课岛其他系列的教程里面已经讲解过,这里就不多介绍了。不熟悉的同学可以查看一下安装教程。点我去查看

安装好编译环境之后,如果还没有package.json就初始化一个,然后新建一个空白的webpack.config.js做为webpack的配置文件。

安装编译插件

要实现ES6的编译,我们这里使用的是babel插件,所以先安装babel相关的功能模块。依次执行:npm i babel-core -d,这个是babel的核心功能模块;npm i babel-loader -d,这个是babel的加载模块;npm i babel-preset-env,这个模块规定babel加载哪些插件和 polyfill的preset,它相对于之前指定版本的preset具有更好的灵活性,可以指定需要兼容的浏览器类型和版本,然后babel自动将你的代码编译成支持兼容的代码。

安装完成之后,你的项目下面会产生node_modules文件夹。

1.png

配置webpack.config.js

关于webpack.config.js文件的基本结构内容,在之前的webpack相关教程里面也有介绍过,这里我们就直接开始配置。点我查看

配置多文件入口

在我们实际开发项目中,页面结构肯定不会像示例那样只有一个页面,一个js文件,而是由很多个页面以及页面对应的js构成,如果全部打包进一个js文件,最终会导致这个文件非常大,所以我们可以根据页面来配置不同页面的入口文件,为每个页面单独打包一个js文件。

首先我们在根目录下创建一个src文件夹,放置我们的样式和ES6源代码,然后让webpack根据es6文件夹下面的文件名生成多个入口文件。 

3.png

打开webpack.config.js,设置文件入口。webpac entries的格式可以为单个的文件目录,也可以用对象或者数组来表示多个文件入口,我们需要的是多个文件入口,所以创建一个方法来遍历./src/es6下面的文件,动态生成一个entry的对象做为值。这样就不用一个个手动添加,当然如果你的文件名和数量是固定不变的,也可以采用手写的方法,只是后期不好扩展。

使用glob模块来遍历文件夹下面的文件路径,生成一个数组,赋值给entry。对于glob不熟悉的还可以在控制台打印出来这个生成的对象。

4.png

配置好entry和output之后,在命令行执行webpack,可以看到生成的dist文件夹,并且按照文件个数重新编译成js文件啦~这样我们就可以根据页面的需要来动态引入。

5.png

6.png

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

12

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?