常用Loader

1. 解析css文件中代码
运行cnpm i style-loader css-loader --save-dev

     { test: /\.css$/, use: ['style-loader', 'css-loader'] }

2. 加载和转义less文件
运行cnpm i less-loader less -D

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

3.加载和转义sass/scss文件
运行cnpm i sass-loader node-sass --save-dev

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

4.加载图片资源以及字体
运行cnpm i url-loader file-loader --save-dev

{test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'},
{test: /\.(png|jpg|gif|svg)$/, use: 'url-loader?esModule=false'}

可以通过limit指定进行base64编码的图片大小；只有小于指定字节（byte）的图片才会进行base64编码：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },

5.加载和转义vue组件
运行cnpm i vue -S将vue安装为运行依赖
运行cnpm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖

      { test: /\.vue$/, use: 'vue-loader' }

6.使用babel处理高级JS语法
运行cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安装babel的相关loader包
运行cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安装babel转换的语法
在webpack.config.js中添加相关loader模块，其中需要注意的是，一定要把node_modules文件夹添加到排除项：

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

在项目根目录中添加.babelrc文件，并修改这个配置文件如下：

{
    "presets":["es2015", "stage-0"],
    "plugins":["transform-runtime"]
}