从头到尾讲Webpack-进阶篇

使用webpack构建本地服务器

想不想让你的浏览器监测你的代码的修改，并自动刷新修改后的结果，其实Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现你想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖

npm install --save-dev webpack-dev-server

devserver作为webpack配置选项中的一项，具有以下配置选项：

devserver配置选项 功能描述
contentBase 默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public”目录）
port 设置默认监听端口，如果省略，默认为”8080“
inline 设置为true，当源文件改变时会自动刷新页面
colors 设置为true，使终端输出的文件为彩色的
historyApiFallback 在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html

继续把这些命令加到webpack的配置文件(webpack.config.js)中，现在的配置文件如下所示：

module.exports = {   
    devtool: 'eval-source-map',   
    entry: __dirname + "/app/main.js",   
    output: {     
        path: __dirname + "/public",     
        filename: "bundle.js" 
    },   
    devServer: {     
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        colors: true,//终端中输出结果为彩色     
        historyApiFallback: true,//不跳转     
        inline: true//实时刷新 
    } 
}

Loaders

Loaders是webpack中最让人激动人心的功能之一了。通过使用不同的loader，webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理，比如说分析JSON文件并把它转换为JavaScript文件，或者说把下一代的JS文件（ES6，ES7)转换为现代浏览器可以识别的JS文件。或者说对React的开发而言，合适的Loaders可以把React的JSX文件转换为JS文件。

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

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

继续上面的例子，我们把Greeter.js里的问候消息放在一个单独的JSON文件里,并通过合适的配置使Greeter.js可以读取该JSON文件的值，配置方法如下：

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

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" 
         }
 },
    devServer: {
            contentBase: "./public",
            colors: true,     
            historyApiFallback: true,     
            inline: true 
    }
}

创建带有问候信息的JSON文件(命名为config.json)

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

更新后的Greeter.js

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

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

Babel

Babel其实是一个编译JavaScript的平台，它的强大之处表现在可以通过编译帮你达到以下目的：

• 下一代的JavaScript标准（ES6，ES7），这些标准目前并未被当前的浏览器完全的支持；
• 使用基于JavaScript进行了拓展的语言，比如React的JSX

Babel的安装与配置

Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，不过webpack把它们整合在一起使用，但是对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包）。

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

module.exports = {
  devtool: 'eval-source-map',

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

  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: "json"
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',//在webpack的module部分的loaders里进行配置即可
        query: {
          presets: ['es2015','react']
        }
      }
    ]
  },

  devServer: {
    contentBase: "./public",
    colors: true,
    historyApiFallback: true,
    inline: true
  }
}

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

npm install --save 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

使用ES6的模块定义和渲染Greeter模块

import React from 'react'; 
import {render} from 'react-dom'; 
import Greeter from './Greeter'; 
render(<Greeter />, document.getElementById('root'));

CSS

webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

//安装
npm install --save-dev style-loader css-loader

//使用 
module.exports = { 
devtool: 'eval-source-map', 
entry: __dirname + "/app/main.js", 
output: { 
path: __dirname + "/build", 
filename: "bundle.js" 
}, 
module: { 
loaders: [
 { 
 test: /\.json$/, 
 loader: "json" 
 }, 
 { 
 test: /\.js$/, 
 exclude: /node_modules/, 
 loader: 'babel' 
 }, 
 { 
 test: /\.css$/, 
 loader: 'style!css'//添加对样式表的处理 
 } 
 ] 
 }, 
 devServer: {...}
}

注：感叹号的作用在于使同一文件能够使用不同类型的loader