webpack入门教程之初识loader(二)

　　上一节我们学习了webpack的安装和编译，这一节我们来一起学习webpack的加载器和配置文件。

　　要想让网页看起来绚丽多彩，那么css就是必不可少的一份子。如果想要在应用中增加一个css文件，那么webpack能不能处理呢？答案当然是可以。但是由于webpack只能本地处理JavaScript，因此我们需要css-loader来处理css文件，我们还需要style-loader在css文件中应用样式。

　　ps:css-loader会遍历css文件，找到url()表达式然后进行处理。style-loader会把原来的css代码插入到页面中的一个style标签中。

　　接下来，我们就来看一看如何使用css-loader和style-loader。

一、安装css-loader和style-loader

npm install css-loader style-loader

ps:需要本地安装，即安装到执行命令所在文件夹，因此不能带上-g。安装成功后，将会创建包含css-loader和style-loader的node_modules文件夹。

二、使用案例（依赖于第一节中的文件）

1. 新建style.css文件。

body {
    background: yellow;
}

2. 更新entry.js。

+ require("!style!css!./style.css");
  document.write(require("./content.js"));

4.重新编译然后刷新浏览器，将会看到页面增加了黄色背景。
ps:在经过loader加载器的处理之后，会将原文件转换成为一个JavaScript module。

5.如果不想写这么长的require("!style!css!./style.css")，我们可以为loader绑定文件扩展。成功后，就可以使用require("./style.css")来引用css文件。
  首先我们更新entry.js。

  + require("./style.css");
  document.write(require("./content.js"));

接下来执行命令

webpack ./entry.js bundle.js --module-bind 'css=style!css'

执行成功后，会看到同样的结果(部分环境需要使用双引号，若执行失败，可尝试将单引号替换成双引号)。

三、应用配置文件

1. 在命令后追加参数的方式显然过于麻烦，所以我们可以把配置都写到config文件中。创建webpack.config.js文件。

  module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
  };

现在我们只需要执行webpack命令。执行后，webpack会尝试去在当前目录下查找webpack.config.js文件，并根据文件内容进行具体处理。

四、 美化命令行输出

编译可能会随着项目的增长而花费很长的时间。所以我们想要去查看编译的进度，或者给命令行增加一些颜色。
可以使用这个命令

webpack --progress --colors

五、监视模式

我们不想每次改变文件内容之后都去手动编译，可以使用

webpack --progress --colors --watch

webpack在编译中会缓存未改变的modules和输出文件。
在使用监视模式时，webpack会将文件监视器安装到编译过程中使用的所有文件。一旦检测到了任何改变，就会自动进行编译。当开启缓存时，webpack会将每个module保持在内存中，
对于没有改变的module进行重用。

六、开发服务器

开发服务器有利于提高本地开发的效率。
首先安装modules：

npm install webpack-dev-server -g

然后执行命令：

webpack-dev-server --progress --colors

执行完成后，将会在本地的8080端口上绑定一个很小的express服务。当bundle.js编译完成后，它将会自动更新浏览器页面，可以尝试使用浏览器打开
http://localhost:8080/webpack-dev-server/bundle查看执行结果。
ps：开发服务器使用webpack的监视模式，它还防止webpack将生成的文件发送到磁盘。相反，它保留并提供从内存生成的文件。

七、小结

到此为止，webpack的入门教程就算了告一段落了，接下来会带来进阶教程，敬请期待。