本套课程将讲解如何用webpack来编译ES6,课程分为两节,第一节我们来安装ES6编译所需要的环境以及编译的配置,主要包括以下内容:
安装webpack和ES6编译环境
配置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文件夹。
配置webpack.config.js
关于webpack.config.js文件的基本结构内容,在之前的webpack相关教程里面也有介绍过,这里我们就直接开始配置。点我查看
配置多文件入口
在我们实际开发项目中,页面结构肯定不会像示例那样只有一个页面,一个js文件,而是由很多个页面以及页面对应的js构成,如果全部打包进一个js文件,最终会导致这个文件非常大,所以我们可以根据页面来配置不同页面的入口文件,为每个页面单独打包一个js文件。
首先我们在根目录下创建一个src文件夹,放置我们的样式和ES6源代码,然后让webpack根据es6文件夹下面的文件名生成多个入口文件。
打开webpack.config.js,设置文件入口。webpac entries的格式可以为单个的文件目录,也可以用对象或者数组来表示多个文件入口,我们需要的是多个文件入口,所以创建一个方法来遍历./src/es6下面的文件,动态生成一个entry的对象做为值。这样就不用一个个手动添加,当然如果你的文件名和数量是固定不变的,也可以采用手写的方法,只是后期不好扩展。
使用glob模块来遍历文件夹下面的文件路径,生成一个数组,赋值给entry。对于glob不熟悉的还可以在控制台打印出来这个生成的对象。
配置好entry和output之后,在命令行执行webpack,可以看到生成的dist文件夹,并且按照文件个数重新编译成js文件啦~这样我们就可以根据页面的需要来动态引入。