WebPack-Loader

Loaders

鼎鼎大名的Loaders登场了！

1、什么是loaders

　　Loaders是webpack中最让人激动人心的功能之一了。通过使用不同的loader，webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理，

　　比如说分析JSON文件并把它转换为JavaScript文件，或者说把下一代的JS文件（ES6，ES7)转换为现代浏览器可以识别的JS文件。或者说对React的开发而言，

　　合适的Loaders可以把React的JSX文件转换为JS文件。

2、loaders的配置参数

Loaders需要单独安装并且需要在webpack.config.js下的modules关键字下进行配置，Loaders的配置选项包括以下几方面：

• test：一个匹配loaders所处理的文件的拓展名的正则表达式（必须）
• loader：loader的名称（必须）
• include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
• query：为loaders提供额外的设置选项（可选）

3、loader的安装

　　//安装可以装换JSON的loader
　　npm install --save-dev json-loader

4、webpack.config.js配置文件

 

module.exports = {

　　 devtool: 'eval-source-map',

　　 entry: __dirname + "/app/main.js",

　　 output: { path: __dirname + "/public", filename: "bundle.js" },

 

　　 module: {//在配置文件里添加JSON loader

　　　　 loaders: [

　　　　　　　　　　{

　　　　　　　　　　　　 test: /.json$/,

　　　　　　　　　　　　 loader: "json"

　　　　　　　　　　}

　　　　　　　　 ]

　　},

　　如果这种写法报错 我们可以尝试 第二种方案

　　module: {
    　　rules: [
      　　{
        　　test: /.json$/,
       　　 use: 'json-loader'
      　　}
    　　]
  　}，

　　 devServer: {

　　　　　　　　 contentBase: "./public",

　　　　　　　　 historyApiFallback: true,

　　　　　　　　 inline: true

　　　　　　　　}

}

5、创建带有问候信息的JSON文件(命名为config.json)  在main.js 和 Greeter.js 目录下创建

//config.json
{
  "greetText": "Hi there and greetings from JSON!"
}

6、更新后的Greeter.js

　　var config = require('./config.json');

　　module.exports = function() {
 　　 var greet = document.createElement('div');
  　　greet.textContent = config.greetText;
  　　return greet;
　　};

注意：Loaders很好，不过有的Loaders使用起来比较复杂，比如说Babel。

作者：zhangwang
链接：http://www.jianshu.com/p/42e11515c10f
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。