webpack实践笔记（二）---添加 loaders

webpack实践笔记（二）--- add loaders

[源码地址]：( https://github.com/silence717... )

本篇文章基于分支step2,切换分支：git checkout step2

loader加载顺序

分了三个级别，preloaders,loaders,postloaders，分别表明前中后，三个处理状态。

添加es6 loader

建立一个es6的文件login.es6

// login.es6
let 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 便可。

在此说明两点：

• 一、 npm的start是一个特殊的脚本名称，在命令行中使用npm start就能够执行相关命令，若是对应的此脚本名称不是start，想要在命令行中运行时，须要这样用npm run {script name}，如npm run dev.

• 二、 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

打开浏览器访问http://127.0.0.1:8080/,此时打开 console，发现并无任何东西输出，这就是strip-loader的做用。再查看sources中的bundle.js为压缩后的文件。