从头到尾讲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的loadernpm 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