Webpack进阶第三节---loaders

loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件(ES6,ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的loaders可以把React中的JSX文件转换为JS文件。

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

test：一个用以匹配loaders所处理文件的扩展名的正则表达式(必须)

loader：loader的名称(必须)

include/exclude：手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选)；

query：为loaders提供格外的设置选项(可选)。

在配置loader之前我们把Greeter.js里的问候消息放在一个单独的JSON文件中，并通过合适的配置使Greeter.js可以读取该JSON文件的值，各文件修改后的代码如下：

更新后的Greeter.js:

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

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

注：由于webpack3.*/webpack2.*已经内置可处理JSON文件，这里我们无需再添加webpack1.*需要的json-loader。在看如何具体使用loader之前我们先看看Babel是什么？

Babel

Babel其实是一个编译JavaScript代码的平台，它可以编译代码帮你达到以下目的：

让你能使用最新的JavaScript代码(ES6,ES7……)，而不用管新标准是否被当前使用的浏览器完全支持；

让你能使用基于JavaScript进行了扩展的语言，比如React的JSX;

Babel的安装与配置

Babel是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包(用的最多的是解析Es6的babel-env-preset包和解析JSX的bable-preset-react包)。

我们先来一次性安装这些依赖包：

// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

在webpack中配置Babel的方法如下：

module.exports = {
    entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/public",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
    },
    devtool: 'eval-source-map',
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
};

现在你的webpack的配置已经允许你使用ES6以及JSX的语法了。继续上面的例子进行测试，这次我们会使用React，记得先安装React和React-DOM

接下来我们使用ES6的语法，更新Greeter.js并返回一个React组件：

//Greeter,js
import React, {Component} from 'react'
import config from './config.json';

class Greeter extends Component{
  render() {
    return (
      <div>
        {config.greetText}
      </div>
    );
  }
}

export default Greeter

修改main.js如下，使用ES6的模块定义和渲染Greeter模块

// main.js
import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';

render(<Greeter />, document.getElementById('root'));

重新使用npm start打包，如果之前打开的本地服务器没有关闭，你应该可以在localhost:8080下看到与之前一样的内容，这说明react和es6被正常打包了。

Webpack进阶第三节---loaders

猜你喜欢