webpack实例教程(一) 安装和查看
webpack实例教程(二) hot Uglify
webpack实例教程(三) loader
webpack实例教程（四）webpack4.0出来了
经过前两小节之后，这一节主要学loader
1、css-loader & style-loader
加载css文件，webpack可以在js文件中直接加载css样式文件
在加载之前需要安装两个包
cnpm install css-loader style-loader --save-dev
然后在js文件中添加require('css文件的地址')；
require('style-loader!css-loader!./admin.css');
或者：
require('./admin.css');
再在webpack.config.js文件的module中添加以下代码
rules: [
{
test: /\.css$/,
use: [{
loader: "style-loader" // 将 JS 字符串生成为 style 节点
}, {
loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
}]
}
]
这里需要有两点说明：
(1)、我们在使用npm install 安装模块或插件的时候，有两种命令把他们写入到 package.json 文件里面去，比如：
--save-dev
--save
在 package.json 文件里面提现出来的区别就是，使用 --save-dev 安装的 插件，被写入到 devDependencies 对象里面去，而使用 --save 安装的插件，责被写入到 dependencies 对象里面去。
区别：devDependencies 里面的插件只用于开发环境，不用于生产环境，而 dependencies 是需要发布到生产环境的。
(2)、由于webpack的版本问题，require('style-loader!css-loader!./admin.css');中的style-loader!css-loader!不能写成style!css!，各种报错。
2、file-loader & url-loader
直接在css中使用background: url(../images/adminBg.jpg);会报错，因为css-loader会将url()解析成类似require()类似的东西。所以需要用到file-loader & url-loader，一般大的图片就直接使用file-loader加载原始图片，小的图标可以直接使用url-loader转化成base64，减少请求。
首先安装这两个包：
cnpm install file-loader url-loader --save-dev
在样式文件中正常添加图片，例如：
body{
background: url(../images/adminBg.jpg);
color: white;
}
h1:before{
content: url(../icons/email.png);
}
在webpack.config.js文件的module的rules中添加以下代码
{
test: /images/,
use: [
{
loader: 'file-loader',
options: {}
}
]
},
{
test: /icons/,
use: [
{
loader: 'url-loader',
options: {}
}
]
},
执行cnpm start，浏览器编译出来的就是不同的结果：
3、sass-loader & node-sass 加载sass文件
还是先安装包，node-sass别忘了呀！
cnpm install sass-loader node-sass --save-dev
然后新建一个sass\less文件
在js文件中引入sass文件require('./admin.scss')
在webpack.config.js文件的module的rules中添加以下代码
{
test: /\.scss$/,
use: [{
loader: "style-loader" // 将 JS 字符串生成为 style 节点
}, {
loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
}, {
loader: "sass-loader" // 将 Sass 编译成 CSS
}]
}
cnpm start 重新执行以后，.scss中的文件中的样式就可以正常作用了。
4、babel-loader & babel-core 转化es6
还是先安装这两个包
cnpm install babel-loader babel-core --save-dev
项目中如果没有用到es6,那就不用这个啦。
在webpack.config.js文件的module的rules中添加以下代码
{
test: /\.js$/,
exclude: /node_modules/,//忽略node_modules文件夹下所有的js,加快编译时间
use: [{
loader: "babel-loader"
}]
}
exclude：不要选中的文件
include：只要选中的文件
cnpm start 重新执行以后，页面正常显示啦！
5、noParse
不用解析的文件，使用noParse
noParse: function(content) {
return /jquery/.test(content);//忽略大型的 library 可以提高构建性能
},
6、版本更新所带来的区别：
* webpack新版本不能缩写file-loader
* loaders被重命名为rules，虽然能用，但是保险起见还是用rules
*noParse的格式也有变化，具体看第五条。
都是自己敲的，有什么不对的地方，希望大家指出来。