webpack实践笔记（二）--- add loaders
[源码地址]：( )
本篇文章基于分支step2,切换分支：git checkout step2
loader加载顺序
分了三个级别，preloaders,loaders,postloaders，分别代表前中后，三个处理状态。
添加es6 loader
创建一个es6的文件login.es6
// login.es6let login = (username, password) => { if(username !== 'admin' || password !== '123') { console.log('incorrect login'); } else { console.log('correct login'); }};login('admin', '123'); 需要使用es6，由于浏览器支持不够，我们必须使用babel转为es5的code。
安装babel相关的包：
npm install babel-core babel-loader babel-preset-es2015
创建babelrc文件，配置为:
{ "presets": ["es2015"]} webpack-config.js中配置loader
module: { loaders: [ { test: /\.es6$/, exclude: /node_modules/, loader: 'babel-loader' } ]},resolve: { extensions: ['', '.js', '.es6']} 运行dev-server，看到文件成功执行，这时我们看到bundle.js中编译后的code为：
var login = function login(username, password) { if (username !== 'admin' || password !== '123') {}};login('admin', '456'); 添加preloader,对js文件进行校验
我们习惯在项目中使用的是eslint,或者jslint也可以，看个人爱好。
安装eslint相关包
npm install eslint eslint-loader eslint-plugin-promise eslint-plugin-standard babel-eslint -D
创建.eslintrc文件，每个公司采用适合自己的规则。配置文件较大，可查看项目源码。
webpack-config.js中添加配置,在此我们采用preloader
preLoaders: [ { test: /\.js$/, exclude: 'node_modules', loader: 'eslint-loader' }] 重新启动，如果code中存在不符合规范的，webpack在编译时候就会出错，根据提示更改对应文件。
package.json中的scripts
我不能一直使用这么复杂的命令去启动，so 我们可以在package.json中配置一下scripts：
"scripts": { "start": "webpack-dev-server",} 这样我们每次启动只需要执行 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环境我们希望使用源码便于调试。
// 生产环境 webpack -d// 开发环境webpack -p
分别执行这两个命令，你可以看到bundle.js内容是不相同的，一个压缩一个未经压缩。
为了便于管理，我们创建一个webpack-bulid.config.js文件
var devConfig = require('./webpack.config');module.exports = devConfig; 通常在开发环境我们会经常使用console.log,debug来进行代码调试，这些其实是不允许带入生产环境的。
尽管采用一系列限制，但是为了防患于未然，我们引入strip-loader包：安装依赖包
npm install strip-loader -D
webpack-build.config.js配置strip-loader
var WebpackStrip = require('strip-loader');var devConfig = require('./webpack.config');var stripLoader = { test: [/\.js$/, /\.es6$/], exclude: /node_modules/, loader: WebpackStrip.loader('console.log', 'debug')};devConfig.module.loaders.push(stripLoader);module.exports = devConfig; 设置webpack执行的配置文件
webpack --config webpack-build.config.js -p
这个命令执行完之后，bundle.js就按照build中的的配置对代码进行了一系列合作。
说明: webpack --config 用于设置使用哪个配置文件做操作。
为了便于调试，我们全局安装一个http-server,用于启动我们的项目。
安装http-server
npm install http-server -g
运行
http-server
打开浏览器访问
此时打开 console，发现并没有任何东西输出，这就是strip-loader的作用。再查看sources中的bundle.js为压缩后的文件。