[源码地址]:( https://github.com/silence717/webpack-practice )
本篇文章基于分支step2,切换分支:git checkout step2
loader加载顺序
分了三个级别,preloaders,loaders,postloaders,分别代表前中后,三个处理状态。
添加es6 loader
创建一个es6的文件login.es6
|
|
需要使用es6,由于浏览器支持不够,我们必须使用babel转为es5的code。
安装babel相关的包:
|
|
创建babelrc文件,配置为:
|
|
webpack-config.js中配置loader
|
|
运行dev-server,看到文件成功执行,这时我们看到bundle.js中编译后的code为:
添加preloader,对js文件进行校验
我们习惯在项目中使用的是eslint,或者jslint也可以,看个人爱好。
安装eslint相关包
|
|
创建.eslintrc文件,每个公司采用适合自己的规则。配置文件较大,可查看项目源码。
webpack-config.js中添加配置,在此我们采用preloader
|
|
重新启动,如果code中存在不符合规范的,webpack在编译时候就会出错,根据提示更改对应文件。
package.json中的scripts
我不能一直使用这么复杂的命令去启动,so 我们可以在package.json中配置一下scripts:
这样我们每次启动只需要执行 npm start 即可。
在此说明两点:
- 1、 npm的start是一个特殊的脚本名称,在命令行中使用npm start就可以执行相关命令,如果对应的此脚本名称不是start,想要在命令行中运行时,需要这样用npm run {script name},如npm run dev.
- 2、 window环境下不支持&连接命令执行,如:gulp & nodemon mock-server.js。
production vs dev
生产环境我们需要对js进行打包压缩,而dev环境我们希望使用源码便于调试。
分别执行这两个命令,你可以看到bundle.js内容是不相同的,一个压缩一个未经压缩。
为了便于管理,我们创建一个webpack-bulid.config.js文件
|
|
通常在开发环境我们会经常使用console.log,debug来进行代码调试,这些其实是不允许带入生产环境的。
尽管采用一系列限制,但是为了防患于未然,我们引入strip-loader包:
[传送门]: ( https://github.com/yahoo/strip-loader )
安装依赖包
|
|
webpack-build.config.js配置strip-loader
|
|
设置webpack执行的配置文件
|
|
这个命令执行完之后,bundle.js就按照build中的的配置对代码进行了一系列合作。
说明: webpack –config 用于设置使用哪个配置文件做操作。
为了便于调试,我们全局安装一个http-server,用于启动我们的项目。
安装http-server
|
|
运行
|
|
打开浏览器访问http://127.0.0.1:8080/,
此时打开 console,发现并没有任何东西输出,这就是strip-loader的作用。
再查看sources中的bundle.js为压缩后的文件。