webpack实例教程(三) loader

经过前两小节之后，这一节主要学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，浏览器编译出来的就是不同的结果：

image.png

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的格式也有变化，具体看第五条。

都是自己敲的，有什么不对的地方，希望大家指出来。