webpack 打包工具使用指南

时间 2019-11-08

标签 webpack 打包工具使用指南繁體版

原文原文链接

写在前面的话

阅读本文以前，先看下面这个webpack的配置文件，若是每一项你都懂，那本文能带给你的收获也许就比较有限，你能够快速浏览或直接跳过；若是你和十天前的我同样，对不少选项存在着疑惑，那花一段时间慢慢阅读本文，你的疑惑必定一个一个都会消失；若是你之前没怎么接触过Webpack，而你又你对webpack感兴趣，那么动手跟着本文中那个贯穿始终的例子写一次，写完之后你会发现你已明明白白的走进了Webpack的大门。css

// 一个常见的`webpack`配置文件
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
        entry: __dirname + "/app/main.js", //已屡次说起的惟一入口文件
        output: {
            path: __dirname + "/build",
            filename: "bundle-[hash].js"
        },
        devtool: 'none',
        devServer: {
            contentBase: "./public", //本地服务器所加载的页面所在的目录
            historyApiFallback: true, //不跳转
            inline: true,
            hot: true
        },
        module: {
            rules: [{
                    test: /(\.jsx|\.js)$/,
                    use: {
                        loader: "babel-loader"
                    },
                    exclude: /node_modules/
                }, {
                    test: /\.css$/,
                    use: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: [{
                            loader: "css-loader",
                            options: {
                                modules: true
                            }
                        }, {
                            loader: "postcss-loader"
                        }],
                    })
                }
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权全部，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html" //new 一个这个插件的实例，并传入相关的参数
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin("style.css")

    ],
};

什么是WebPack，为何要使用它？

为什要使用WebPack

现今的不少网页其实能够看作是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了不少好的实践方法html

模块化，让咱们能够把复杂的程序细化为小的文件;
相似于TypeScript这种在JavaScript基础上拓展的开发语言：使咱们可以实现目前版本的JavaScript不能直接使用的特性，而且以后还能转换为JavaScript文件使浏览器能够识别；
Scss，less等CSS预处理器
...

这些改进确实大大的提升了咱们的开发效率，可是利用它们开发的文件每每须要进行额外的处理才能让浏览器识别,而手动处理又是很是繁琐的，这就为WebPack类的工具的出现提供了需求。前端

什么是Webpack

WebPack能够看作是模块打包机：它作的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。node

WebPack和Grunt以及Gulp相比有什么特性

其实Webpack和另外两个并无太多的可比性，Gulp/Grunt是一种可以优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优势使得Webpack在不少场景下能够替代Gulp/Grunt类的工具。react

Grunt和Gulp的工做方式是：在一个配置文件中，指明对某些文件进行相似编译，组合，压缩等任务的具体步骤，工具以后能够自动替你完成这些任务。webpack

Grunt和Gulp的工做流程

Webpack的工做方式是：把你的项目当作一个总体，经过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的全部依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。git

Webpack工做方式

若是实在要把两者进行比较，Webpack的处理速度更快更直接，能打包更多不一样类型的文件。es6

开始使用Webpack

初步了解了Webpack工做方式后，咱们一步步的开始学习使用Webpack。github

安装

Webpack可使用npm安装，新建一个空的练习文件夹（此处命名为webpack sample project），在终端中转到该文件夹后执行下述指令就能够完成安装。web

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

正式使用Webpack前的准备

在上述练习文件夹中建立一个package.json文件，这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。在终端中使用npm init命令能够自动建立这个package.json文件

npm init

输入这个命令后，终端会问你一系列诸如项目名称，项目描述，做者等信息，不过不用担忧，若是你不许备在npm中发布你的模块，这些问题的答案都不重要，回车默认便可。

package.json文件已经就绪，咱们在本项目中安装Webpack做为依赖包

// 安装Webpack
npm install --save-dev webpack

回到以前的空文件夹，并在里面建立两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和咱们将写的JavaScript模块，public文件夹用来存放以后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）。接下来咱们再建立三个文件:

index.html --放在public文件夹中;
Greeter.js-- 放在app文件夹中;
main.js-- 放在app文件夹中;

此时项目结构以下图所示

项目结构

咱们在index.html文件中写入最基础的html代码，它在这里目的在于引入打包后的js文件（这里咱们先把以后打包后的js文件命名为bundle.js，以后咱们还会详细讲述）。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

咱们在Greeter.js中定义一个返回包含问候信息的html元素的函数,并依据CommonJS规范导出这个函数为一个模块：

// Greeter.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

main.js文件中咱们写入下述代码，用以把Greeter模块返回的节点插入页面。

//main.js 
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());

正式使用Webpack

webpack能够在终端中使用，在基本的使用方法以下：

# {extry file}出填写入口文件的路径，本文中就是上述main.js的路径， # {destination for bundled file}处填写打包文件的存放路径 # 填写路径的时候不用添加{} webpack {entry file} {destination for bundled file}

指定入口文件后，webpack将自动识别项目所依赖的其它文件，不过须要注意的是若是你的webpack不是全局安装的，那么当你在终端中使用此命令时，须要额外指定其在node_modules中的地址，继续上面的例子，在终端中输入以下命令

# webpack非全局安装的状况 node_modules/.bin/webpack app/main.js public/bundle.js

结果以下

使用命令行打包

能够看出webpack同时编译了main.js 和Greeter,js,如今打开index.html,能够看到以下结果

htmlResult1

有没有很激动，已经成功的使用Webpack打包了一个文件了。不过在终端中进行复杂的操做，实际上是不太方便且容易出错的，接下来看看Webpack的另外一种更常见的使用方法。

经过配置文件来使用`Webpack`

Webpack拥有不少其它的比较高级的功能（好比说本文后面会介绍的loaders和plugins），这些功能其实均可以经过命令行模式实现，可是正如前面提到的，这样不太方便且容易出错的，更好的办法是定义一个配置文件，这个配置文件其实也是一个简单的JavaScript模块，咱们能够把全部的与打包相关的信息放在里面。

继续上面的例子来讲明如何写这个配置文件，在当前练习文件夹的根目录下新建一个名为webpack.config.js的文件，咱们在其中写入以下所示的简单配置代码，目前的配置主要涉及到的内容是入口文件路径和打包后文件的存放路径。

module.exports = {
  entry:  __dirname + "/app/main.js",//已屡次说起的惟一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

有了这个配置以后，再打包文件，只需在终端里运行webpack(非全局安装需使用node_modules/.bin/webpack)命令就能够了，这条命令会自动引用webpack.config.js文件中的配置选项，示例以下：

配合配置文件进行打包

又学会了一种使用Webpack的方法，这种方法不用管那烦人的命令行参数，有没有感受很爽。若是咱们能够连webpack(非全局安装需使用node_modules/.bin/webpack)这条命令均可以不用，那种感受会不会更爽~，继续看下文。

更快捷的执行打包任务

在命令行中输入命令须要代码相似于node_modules/.bin/webpack这样的路径实际上是比较烦人的，不过值得庆幸的是npm能够引导任务执行，对npm进行配置后能够在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置便可，设置方法以下。

{
  "name": "webpack-sample-project", "version": "1.0.0", "description": "Sample webpack project", "scripts": { "start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除 }, "author": "zhang", "license": "ISC", "devDependencies": { "webpack": "^1.12.9" } }

注：package.json中的script会安装必定顺序寻找命令对应位置，本地的node_modules/.bin路径就在这个寻找清单中，因此不管是全局仍是局部安装的Webpack，你都不须要写前面那指明详细的路径了。

npm的start命令是一个特殊的脚本名称，其特殊性表如今，在命令行中使用npm start就能够执行其对于的命令，若是对应的此脚本名称不是start，想要在命令行中运行时，须要这样用npm run {script name}如npm run build，咱们在命令行中输入npm start试试，输出结果以下：

使用npm start 打包代码

如今只须要使用npm start就能够打包文件了，有没有以为webpack也不过如此嘛，不过不要过小瞧webpack，要充分发挥其强大的功能咱们须要修改配置文件的其它选项，一项项来看。

Webpack的强大功能

生成Source Maps（使调试更容易）

开发老是离不开调试，方便的调试能极大的提升开发效率，不过有时候经过打包后的文件，你是不容易找到出错了的地方，对应的你写的代码的位置的，Source Maps就是来帮咱们解决这个问题的。

经过简单的配置，webpack就能够在打包时为咱们生成的source maps，这为咱们提供了一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，也更容易调试。

在webpack的配置文件中配置source maps，须要配置devtool，它有如下四种不一样的配置选项，各具优缺点，描述以下：

devtool选项	配置结果
`source-map`	在一个单独的文件中产生一个完整且功能彻底的文件。这个文件具备最好的`source map`，可是它会减慢打包速度；
`cheap-module-source-map`	在一个单独的文件中生成一个不带列映射的`map`，不带列映射提升了打包速度，可是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试形成不便；
`eval-source-map`	使用`eval`打包源文件模块，在同一个文件中生成干净的完整的`source map`。这个选项能够在不影响构建速度的前提下生成完整的`sourcemap`，可是对打包后输出的JS文件的执行具备性能和安全的隐患。在开发阶段这是一个很是好的选项，在生产阶段则必定不要启用这个选项；
`cheap-module-eval-source-map`	这是在打包文件时最快的生成`source map`的方法，生成的`Source Map` 会和打包后的`JavaScript`文件同行显示，没有列映射，和`eval-source-map`选项具备类似的缺点；

正如上表所述，上述选项由上到下打包速度愈来愈快，不过同时也具备愈来愈多的负面做用，较快的打包速度的后果就是对打包后的文件的的执行有必定影响。

对小到中型的项目中，eval-source-map是一个很好的选项，再次强调你只应该开发阶段使用它，咱们继续对上文新建的webpack.config.js，进行以下配置:

module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}

cheap-module-eval-source-map方法构建速度更快，可是不利于调试，推荐在大型项目考虑时间成本时使用。

使用webpack构建本地服务器

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

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

devserver做为webpack配置选项中的一项，如下是它的一些配置选项，更多配置可参考这里

devserver的配置选项	功能描述
contentBase	默认webpack-dev-server会为根文件夹提供本地服务器，若是想为另一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录）
port	设置默认监听端口，若是省略，默认为”8080“
inline	设置为`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",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  } 
}

在package.json中的scripts对象中添加以下命令，用以开启本地服务器：

"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack", "server": "webpack-dev-server --open" },

在终端中输入npm run server便可在本地的8080端口查看结果

开启本地服务器

Loaders

鼎鼎大名的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文件的值，各文件修改后的代码以下：

在app文件夹中建立带有问候信息的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;
};

注因为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-preset-es2015包和解析JSX的babel-preset-react包）。

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

// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-es2015 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: [
                            "es2015", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
};

如今你的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

修改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被正常打包了。

localhost:8080

Babel的配置

Babel其实能够彻底在 webpack.config.js 中进行配置，可是考虑到babel具备很是多的配置选项，在单一的webpack.config.js文件中进行配置每每使得这个文件显得太复杂，所以一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中。咱们如今的babel的配置并不算复杂，不过以后咱们会再加一些东西，所以如今咱们就提取出相关部分，分两个配置文件进行配置（webpack会自动调用.babelrc里的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"
                },
                exclude: /node_modules/
            }
        ]
    }
};

//.babelrc
{
  "presets": ["react", "es2015"]
}

到目前为止，咱们已经知道了，对于模块，Webpack能提供很是强大的处理功能，那那些是模块呢。

一切皆模块

Webpack有一个不可不说的优势，它把全部的文件都都当作模块处理，JavaScript代码，CSS和fonts以及图片等等经过合适的loader均可以被处理。

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 = {

   ...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    }
};

请注意这里对同一个文件引入多个loader的方法。

接下来，在app文件夹里建立一个名字为"main.css"的文件，对一些元素设置样式

/* main.css */ html { box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5, h6, p, ul { margin: 0; padding: 0; }

咱们这里例子中用到的webpack只有单一的入口，其它的模块须要经过 import, require, url等与入口文件创建其关联，为了让webpack能找到”main.css“文件，咱们把它导入”main.js “中，以下

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

import './main.css';//使用require导入css文件

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

一般状况下，css会和js打包到同一个文件中，并不会打包为一个单独的css文件，不过经过合适的配置webpack也能够把css打包为单独的文件的。

上面的代码说明webpack是怎么把css当作模块看待的，我们继续看一个更加真实的css模块实践。

CSS module

在过去的一些年里，JavaScript经过一些新的语言特性，更好的工具以及更好的实践方法（好比说模块化）发展得很是迅速。模块使得开发者把复杂的代码转化为小的，干净的，依赖声明明确的单元，配合优化工具，依赖管理和加载管理能够自动完成。

不过前端的另一部分，CSS发展就相对慢一些，大多的样式表却依旧巨大且充满了全局类名，维护和修改都很是困难。

最近有一个叫作 CSS modules 的技术就意在把JS的模块化思想带入CSS中来，经过CSS模块，全部的类名，动画名默认都只做用于当前模块。Webpack从一开始就对CSS模块化提供了支持，在CSS loader中进行配置后，你所须要作的一切就是把”modules“传递到所须要的地方，而后就能够直接把CSS的类名传递到组件的代码中，且这样作只对当前组件有效，没必要担忧在不一样的模块中使用相同的类名形成冲突。具体的代码以下

module.exports = {

    ...

    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }
                ]
            }
        ]
    }
};

在app文件夹下建立一个Greeter.css文件

.root {
  background-color: #eee;
  padding: 10px;
  border: 3px solid #ccc;
}

导入.root到Greeter.js中

import React, {Component} from 'react';
import config from './config.json';
import styles from './Greeter.css';//导入

class Greeter extends Component{
  render() {
    return (
      <div className={styles.root}>//添加类名
        {config.greetText}
      </div>
    );
  }
}

export default Greeter

放心使用把，相同的类名也不会形成不一样组件之间的污染。

应用了css module后的样式

CSS modules 也是一个很大的主题，有兴趣的话能够去官方文档查看更多消息

CSS预处理器

Sass 和 Less 之类的预处理器是对原生CSS的拓展，它们容许你使用相似于variables, nesting, mixins, inheritance等不存在于CSS中的特性来写CSS，CSS预处理器能够这些特殊类型的语句转化为浏览器可识别的CSS语句，

你如今可能都已经熟悉了，在webpack里使用相关loaders进行配置就可使用了，如下是经常使用的CSS 处理loaders:

Less Loader
Sass Loader
Stylus Loader

不过其实也存在一个CSS的处理平台-PostCSS，它能够帮助你的CSS实现更多的功能，在其官方文档可了解更多相关知识。

举例来讲如何使用PostCSS，咱们使用PostCSS来为CSS代码自动添加适应不一样浏览器的CSS前缀。

首先安装postcss-loader 和 autoprefixer（自动添加前缀的插件）

npm install --save-dev postcss-loader autoprefixer

接下来，在webpack配置文件中添加postcss-loader，在根目录新建postcss.config.js,并添加以下代码以后，从新使用npm start打包时，你写的css会自动根据Can i use里的数据添加不一样前缀了。

//webpack.config.js
module.exports = {
    ...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    }
}

// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

至此，本文已经谈论了处理JS的Babel和处理CSS的PostCSS的基本用法，它们其实也是两个单独的平台，配合webpack能够很好的发挥它们的做用。接下来介绍Webpack中另外一个很是重要的功能-Plugins

插件（Plugins）

插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程当中生效，执行相关的任务。
Loaders和Plugins经常被弄混，可是他们实际上是彻底不一样的东西，能够这么来讲，loaders是在打包构建过程当中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操做单个文件，它直接对整个构建过程其做用。

Webpack有不少内置插件，同时也有不少第三方插件，可让咱们完成更加丰富的功能。

使用插件的方法

const webpack = require('webpack');

module.exports = {
...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权全部，翻版必究')
    ],
};

经过这个插件，打包后的JS文件显示以下

版权全部，翻版必究

这就是webpack插件的基础用法了，下面给你们推荐几个经常使用的插件

HtmlWebpackPlugin

这个插件的做用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不一样时很是有用（好比添加了hash值）。

安装

npm install --save-dev html-webpack-plugin

这个插件自动完成了咱们以前手动作的一些事情，在正式使用以前须要对一直以来的项目结构作一些更改：

移除public文件夹，利用此插件，index.html文件会自动生成，此外CSS已经经过前面的操做打包到JS中了。
在app目录下，建立一个index.tmpl.html文件模板，这个模板包含title等必须元素，在编译过程当中，插件会依据此模板生成最终的html页面，会自动添加所依赖的 css, js，favicon等文件，index.tmpl.html中的模板源代码以下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
  </body>
</html>

3.更新webpack的配置文件，方法同上,新建一个build文件夹用来存放最终的输出文件

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: __dirname + "/app/main.js",//已屡次说起的惟一入口文件
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    devtool: 'eval-source-map',
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权全部，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
        })
    ],
};

再次执行npm start你会发现，build文件夹下面生成了bundle.js和index.html。

build文件夹

Hot Module Replacement

Hot Module Replacement（HMR）也是webpack里颇有用的一个插件，它容许你在修改组件代码后，自动刷新实时预览修改后的效果。

在webpack中实现HMR也很简单，只须要作两项配置

在webpack配置文件中添加HMR插件；
在Webpack Dev Server中添加“hot”参数；

不过配置完这些后，JS模块其实仍是不能自动热加载的，还须要在你的JS模块中执行一个Webpack提供的API才能实现热加载，虽然这个API不难使用，可是若是是React模块，使用咱们已经熟悉的Babel能够更方便的实现功能热加载。

整理下咱们的思路，具体实现方法以下

Babel和webpack是独立的工具
两者能够一块儿工做
两者均可以经过插件拓展功能
HMR是一个webpack插件，它让你能浏览器中实时观察模块修改后的效果，可是若是你想让它工做，须要对模块进行额外的配额；
Babel有一个叫作react-transform-hrm的插件，能够在不对React模块进行额外的配置的前提下让HMR正常工做；

仍是继续上例来实际看看如何配置

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: __dirname + "/app/main.js",//已屡次说起的惟一入口文件
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    devtool: 'eval-source-map',
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true,
        hot: true
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权全部，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
        }),
        new webpack.HotModuleReplacementPlugin()//热加载插件
    ],
};

安装react-transform-hmr

npm install --save-dev babel-plugin-react-transform react-transform-hmr

配置Babel

// .babelrc
{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
    "plugins": [["react-transform", {
       "transforms": [{
         "transform": "react-transform-hmr",
         
         "imports": ["react"],
         
         "locals": ["module"]
       }]
     }]]
    }
  }
}

如今当你使用React时，能够热加载模块了,每次保存就能在浏览器上看到更新内容。

产品阶段的构建

目前为止，咱们已经使用webpack构建了一个完整的开发环境。可是在产品阶段，可能还须要对打包的文件进行额外的处理，好比说优化，压缩，缓存以及分离CSS和JS。

对于复杂的项目来讲，须要复杂的配置，这时候分解配置文件为多个小的文件可使得事情层次分明，以上面的例子来讲，咱们建立一个webpack.production.config.js的文件，在里面加上基本的配置,它和原始的webpack.config.js很像，以下

// webpack.production.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: __dirname + "/app/main.js", //已屡次说起的惟一入口文件
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    devtool: 'eval-source-map',
    devServer: {
        contentBase: "./public", //本地服务器所加载的页面所在的目录
        historyApiFallback: true, //不跳转
        inline: true,
        hot: true
    },
    module: {
        rules: [{
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader"
            },
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [{
                    loader: "css-loader",
                    options: {
                        modules: true
                    }
                }, {
                    loader: "postcss-loader"
                }],
            })
        }]
    },
    plugins: [
        new webpack.BannerPlugin('版权全部，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html" //new 一个这个插件的实例，并传入相关的参数
        }),
        new webpack.HotModuleReplacementPlugin() //热加载插件
    ],
};

//package.json
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open",
    "build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
...
  },
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  }
}

优化插件

webpack提供了一些在发布阶段很是有用的优化插件，它们大多来自于webpack社区，能够经过npm安装，经过如下插件能够完成产品发布阶段所需的功能

OccurenceOrderPlugin :为组件分配ID，经过这个插件webpack能够分析和优先考虑使用最多的模块，并为它们分配最小的ID
UglifyJsPlugin：压缩JS代码；
ExtractTextPlugin：分离CSS和JS文件

咱们继续用例子来看看如何添加它们，OccurenceOrder 和 UglifyJS plugins 都是内置插件，你须要作的只是安装其它非内置插件

npm install --save-dev extract-text-webpack-plugin

在配置文件的plugins后引用它们

// webpack.production.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: __dirname + "/app/main.js",//已屡次说起的惟一入口文件
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    devtool: 'none',
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true,
        hot: true
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权全部，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin("style.css")
    ],
};

此时执行npm run build能够看见代码是被压缩后的

压缩后的代码

缓存

缓存无处不在，使用缓存的最好方法是保证你的文件名和文件内容是匹配的（内容改变，名称相应改变）

webpack能够把一个哈希值添加到打包的文件名中，使用方法以下,添加特殊的字符串混合体（[name], [id] and [hash]）到输出文件名前

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
..
    output: {
        path: __dirname + "/build",
        filename: "bundle-[hash].js"
    },
   ...
};

如今用户会有合理的缓存了。

带hash值的js名

做者：zhangwang
连接：http://www.jianshu.com/p/42e11515c10f
來源：简书
著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。

写在前面的话

阅读本文以前，先看下面这个webpack的配置文件，若是每一项你都懂，那本文能带给你的收获也许就比较有限，你能够快速浏览或直接跳过；若是你和十天前的我同样，对不少选项存在着疑惑，那花一段时间慢慢阅读本文，你的疑惑必定一个一个都会消失；若是你之前没怎么接触过Webpack，而你又你对webpack感兴趣，那么动手跟着本文中那个贯穿始终的例子写一次，写完之后你会发现你已明明白白的走进了Webpack的大门。

// 一个常见的`webpack`配置文件
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
        entry: __dirname + "/app/main.js", //已屡次说起的惟一入口文件
        output: {
            path: __dirname + "/build",
            filename: "bundle-[hash].js"
        },
        devtool: 'none',
        devServer: {
            contentBase: "./public", //本地服务器所加载的页面所在的目录
            historyApiFallback: true, //不跳转
            inline: true,
            hot: true
        },
        module: {
            rules: [{
                    test: /(\.jsx|\.js)$/,
                    use: {
                        loader: "babel-loader"
                    },
                    exclude: /node_modules/
                }, {
                    test: /\.css$/,
                    use: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: [{
                            loader: "css-loader",
                            options: {
                                modules: true
                            }
                        }, {
                            loader: "postcss-loader"
                        }],
                    })
                }
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权全部，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html" //new 一个这个插件的实例，并传入相关的参数
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin("style.css")

    ],
};

什么是WebPack，为何要使用它？

为什要使用WebPack

现今的不少网页其实能够看作是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了不少好的实践方法

模块化，让咱们能够把复杂的程序细化为小的文件;
相似于TypeScript这种在JavaScript基础上拓展的开发语言：使咱们可以实现目前版本的JavaScript不能直接使用的特性，而且以后还能转换为JavaScript文件使浏览器能够识别；
Scss，less等CSS预处理器
...

这些改进确实大大的提升了咱们的开发效率，可是利用它们开发的文件每每须要进行额外的处理才能让浏览器识别,而手动处理又是很是繁琐的，这就为WebPack类的工具的出现提供了需求。

什么是Webpack

WebPack能够看作是模块打包机：它作的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

WebPack和Grunt以及Gulp相比有什么特性

其实Webpack和另外两个并无太多的可比性，Gulp/Grunt是一种可以优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优势使得Webpack在不少场景下能够替代Gulp/Grunt类的工具。

Grunt和Gulp的工做方式是：在一个配置文件中，指明对某些文件进行相似编译，组合，压缩等任务的具体步骤，工具以后能够自动替你完成这些任务。

Grunt和Gulp的工做流程

Webpack的工做方式是：把你的项目当作一个总体，经过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的全部依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

Webpack工做方式

若是实在要把两者进行比较，Webpack的处理速度更快更直接，能打包更多不一样类型的文件。

开始使用Webpack

初步了解了Webpack工做方式后，咱们一步步的开始学习使用Webpack。

安装

Webpack可使用npm安装，新建一个空的练习文件夹（此处命名为webpack sample project），在终端中转到该文件夹后执行下述指令就能够完成安装。

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

正式使用Webpack前的准备

在上述练习文件夹中建立一个package.json文件，这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。在终端中使用npm init命令能够自动建立这个package.json文件

npm init

package.json文件已经就绪，咱们在本项目中安装Webpack做为依赖包

// 安装Webpack
npm install --save-dev webpack

回到以前的空文件夹，并在里面建立两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和咱们将写的JavaScript模块，public文件夹用来存放以后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）。接下来咱们再建立三个文件:

index.html --放在public文件夹中;
Greeter.js-- 放在app文件夹中;
main.js-- 放在app文件夹中;

此时项目结构以下图所示

项目结构

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

咱们在Greeter.js中定义一个返回包含问候信息的html元素的函数,并依据CommonJS规范导出这个函数为一个模块：

// Greeter.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

main.js文件中咱们写入下述代码，用以把Greeter模块返回的节点插入页面。

//main.js 
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());

正式使用Webpack

webpack能够在终端中使用，在基本的使用方法以下：

# {extry file}出填写入口文件的路径，本文中就是上述main.js的路径， # {destination for bundled file}处填写打包文件的存放路径 # 填写路径的时候不用添加{} webpack {entry file} {destination for bundled file}

# webpack非全局安装的状况 node_modules/.bin/webpack app/main.js public/bundle.js

结果以下

使用命令行打包

能够看出webpack同时编译了main.js 和Greeter,js,如今打开index.html,能够看到以下结果

htmlResult1

经过配置文件来使用`Webpack`

module.exports = {
  entry:  __dirname + "/app/main.js",//已屡次说起的惟一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

配合配置文件进行打包

更快捷的执行打包任务

{
  "name": "webpack-sample-project", "version": "1.0.0", "description": "Sample webpack project", "scripts": { "start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除 }, "author": "zhang", "license": "ISC", "devDependencies": { "webpack": "^1.12.9" } }

注：package.json中的script会安装必定顺序寻找命令对应位置，本地的node_modules/.bin路径就在这个寻找清单中，因此不管是全局仍是局部安装的Webpack，你都不须要写前面那指明详细的路径了。

使用npm start 打包代码

Webpack的强大功能

生成Source Maps（使调试更容易）

在webpack的配置文件中配置source maps，须要配置devtool，它有如下四种不一样的配置选项，各具优缺点，描述以下：

devtool选项	配置结果
`source-map`	在一个单独的文件中产生一个完整且功能彻底的文件。这个文件具备最好的`source map`，可是它会减慢打包速度；
`cheap-module-source-map`	在一个单独的文件中生成一个不带列映射的`map`，不带列映射提升了打包速度，可是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试形成不便；
`eval-source-map`	使用`eval`打包源文件模块，在同一个文件中生成干净的完整的`source map`。这个选项能够在不影响构建速度的前提下生成完整的`sourcemap`，可是对打包后输出的JS文件的执行具备性能和安全的隐患。在开发阶段这是一个很是好的选项，在生产阶段则必定不要启用这个选项；
`cheap-module-eval-source-map`	这是在打包文件时最快的生成`source map`的方法，生成的`Source Map` 会和打包后的`JavaScript`文件同行显示，没有列映射，和`eval-source-map`选项具备类似的缺点；

对小到中型的项目中，eval-source-map是一个很好的选项，再次强调你只应该开发阶段使用它，咱们继续对上文新建的webpack.config.js，进行以下配置:

module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}

cheap-module-eval-source-map方法构建速度更快，可是不利于调试，推荐在大型项目考虑时间成本时使用。

使用webpack构建本地服务器

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

devserver做为webpack配置选项中的一项，如下是它的一些配置选项，更多配置可参考这里

devserver的配置选项	功能描述
contentBase	默认webpack-dev-server会为根文件夹提供本地服务器，若是想为另一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录）
port	设置默认监听端口，若是省略，默认为”8080“
inline	设置为`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",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  } 
}

在package.json中的scripts对象中添加以下命令，用以开启本地服务器：

"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack", "server": "webpack-dev-server --open" },

在终端中输入npm run server便可在本地的8080端口查看结果

开启本地服务器

Loaders

鼎鼎大名的Loaders登场了！

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

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

在app文件夹中建立带有问候信息的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;
};

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

Babel

Babel实际上是一个编译JavaScript的平台，它的强大之处表如今能够经过编译帮你达到如下目的：

使用下一代的JavaScript代码（ES6，ES7...），即便这些标准目前并未被当前的浏览器彻底的支持；
使用基于JavaScript进行了拓展的语言，好比React的JSX；

Babel的安装与配置

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

// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-es2015 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: [
                            "es2015", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
};

如今你的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

修改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被正常打包了。

localhost:8080

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"
                },
                exclude: /node_modules/
            }
        ]
    }
};

//.babelrc
{
  "presets": ["react", "es2015"]
}

到目前为止，咱们已经知道了，对于模块，Webpack能提供很是强大的处理功能，那那些是模块呢。

一切皆模块

Webpack有一个不可不说的优势，它把全部的文件都都当作模块处理，JavaScript代码，CSS和fonts以及图片等等经过合适的loader均可以被处理。

CSS

继续上面的例子

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

//使用
module.exports = {

   ...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    }
};

请注意这里对同一个文件引入多个loader的方法。

接下来，在app文件夹里建立一个名字为"main.css"的文件，对一些元素设置样式

/* main.css */ html { box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5, h6, p, ul { margin: 0; padding: 0; }

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

import './main.css';//使用require导入css文件

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

一般状况下，css会和js打包到同一个文件中，并不会打包为一个单独的css文件，不过经过合适的配置webpack也能够把css打包为单独的文件的。

上面的代码说明webpack是怎么把css当作模块看待的，我们继续看一个更加真实的css模块实践。

CSS module

不过前端的另一部分，CSS发展就相对慢一些，大多的样式表却依旧巨大且充满了全局类名，维护和修改都很是困难。

module.exports = {

    ...

    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }
                ]
            }
        ]
    }
};

在app文件夹下建立一个Greeter.css文件

.root {
  background-color: #eee;
  padding: 10px;
  border: 3px solid #ccc;
}

导入.root到Greeter.js中

import React, {Component} from 'react';
import config from './config.json';
import styles from './Greeter.css';//导入

class Greeter extends Component{
  render() {
    return (
      <div className={styles.root}>//添加类名
        {config.greetText}
      </div>
    );
  }
}

export default Greeter

放心使用把，相同的类名也不会形成不一样组件之间的污染。

应用了css module后的样式

CSS modules 也是一个很大的主题，有兴趣的话能够去官方文档查看更多消息

CSS预处理器

你如今可能都已经熟悉了，在webpack里使用相关loaders进行配置就可使用了，如下是经常使用的CSS 处理loaders:

Less Loader
Sass Loader
Stylus Loader

不过其实也存在一个CSS的处理平台-PostCSS，它能够帮助你的CSS实现更多的功能，在其官方文档可了解更多相关知识。

举例来讲如何使用PostCSS，咱们使用PostCSS来为CSS代码自动添加适应不一样浏览器的CSS前缀。

首先安装postcss-loader 和 autoprefixer（自动添加前缀的插件）

npm install --save-dev postcss-loader autoprefixer

//webpack.config.js
module.exports = {
    ...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    }
}

// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

插件（Plugins）

Webpack有不少内置插件，同时也有不少第三方插件，可让咱们完成更加丰富的功能。

使用插件的方法

const webpack = require('webpack');

module.exports = {
...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权全部，翻版必究')
    ],
};

经过这个插件，打包后的JS文件显示以下

版权全部，翻版必究

这就是webpack插件的基础用法了，下面给你们推荐几个经常使用的插件

HtmlWebpackPlugin

安装

npm install --save-dev html-webpack-plugin

这个插件自动完成了咱们以前手动作的一些事情，在正式使用以前须要对一直以来的项目结构作一些更改：

移除public文件夹，利用此插件，index.html文件会自动生成，此外CSS已经经过前面的操做打包到JS中了。
在app目录下，建立一个index.tmpl.html文件模板，这个模板包含title等必须元素，在编译过程当中，插件会依据此模板生成最终的html页面，会自动添加所依赖的 css, js，favicon等文件，index.tmpl.html中的模板源代码以下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
  </body>
</html>

3.更新webpack的配置文件，方法同上,新建一个build文件夹用来存放最终的输出文件

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: __dirname + "/app/main.js",//已屡次说起的惟一入口文件
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    devtool: 'eval-source-map',
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权全部，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
        })
    ],
};

再次执行npm start你会发现，build文件夹下面生成了bundle.js和index.html。

build文件夹

Hot Module Replacement

Hot Module Replacement（HMR）也是webpack里颇有用的一个插件，它容许你在修改组件代码后，自动刷新实时预览修改后的效果。

在webpack中实现HMR也很简单，只须要作两项配置

在webpack配置文件中添加HMR插件；
在Webpack Dev Server中添加“hot”参数；

整理下咱们的思路，具体实现方法以下

Babel和webpack是独立的工具
两者能够一块儿工做
两者均可以经过插件拓展功能
HMR是一个webpack插件，它让你能浏览器中实时观察模块修改后的效果，可是若是你想让它工做，须要对模块进行额外的配额；
Babel有一个叫作react-transform-hrm的插件，能够在不对React模块进行额外的配置的前提下让HMR正常工做；

仍是继续上例来实际看看如何配置

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: __dirname + "/app/main.js",//已屡次说起的惟一入口文件
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    devtool: 'eval-source-map',
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true,
        hot: true
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权全部，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
        }),
        new webpack.HotModuleReplacementPlugin()//热加载插件
    ],
};

安装react-transform-hmr

npm install --save-dev babel-plugin-react-transform react-transform-hmr

配置Babel

// .babelrc
{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
    "plugins": [["react-transform", {
       "transforms": [{
         "transform": "react-transform-hmr",
         
         "imports": ["react"],
         
         "locals": ["module"]
       }]
     }]]
    }
  }
}

如今当你使用React时，能够热加载模块了,每次保存就能在浏览器上看到更新内容。

产品阶段的构建

// webpack.production.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: __dirname + "/app/main.js", //已屡次说起的惟一入口文件
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    devtool: 'eval-source-map',
    devServer: {
        contentBase: "./public", //本地服务器所加载的页面所在的目录
        historyApiFallback: true, //不跳转
        inline: true,
        hot: true
    },
    module: {
        rules: [{
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader"
            },
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [{
                    loader: "css-loader",
                    options: {
                        modules: true
                    }
                }, {
                    loader: "postcss-loader"
                }],
            })
        }]
    },
    plugins: [
        new webpack.BannerPlugin('版权全部，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html" //new 一个这个插件的实例，并传入相关的参数
        }),
        new webpack.HotModuleReplacementPlugin() //热加载插件
    ],
};

//package.json
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open",
    "build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
...
  },
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  }
}

优化插件

webpack提供了一些在发布阶段很是有用的优化插件，它们大多来自于webpack社区，能够经过npm安装，经过如下插件能够完成产品发布阶段所需的功能

OccurenceOrderPlugin :为组件分配ID，经过这个插件webpack能够分析和优先考虑使用最多的模块，并为它们分配最小的ID
UglifyJsPlugin：压缩JS代码；
ExtractTextPlugin：分离CSS和JS文件

咱们继续用例子来看看如何添加它们，OccurenceOrder 和 UglifyJS plugins 都是内置插件，你须要作的只是安装其它非内置插件

npm install --save-dev extract-text-webpack-plugin

在配置文件的plugins后引用它们

// webpack.production.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: __dirname + "/app/main.js",//已屡次说起的惟一入口文件
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    devtool: 'none',
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true,
        hot: true
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权全部，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin("style.css")
    ],
};

此时执行npm run build能够看见代码是被压缩后的

压缩后的代码

缓存

缓存无处不在，使用缓存的最好方法是保证你的文件名和文件内容是匹配的（内容改变，名称相应改变）

webpack能够把一个哈希值添加到打包的文件名中，使用方法以下,添加特殊的字符串混合体（[name], [id] and [hash]）到输出文件名前

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
..
    output: {
        path: __dirname + "/build",
        filename: "bundle-[hash].js"
    },
   ...
};

如今用户会有合理的缓存了。

带hash值的js名

连接：http://www.jianshu.com/p/42e11515c10f
來源：简书

附上各类问题的解答：

在项目根目录运行webpack

webpack

a. Error: Cannot find module 'webpack/../../.....'
- 解决1：在本项目中安装webpack：
  npm install webpack
- 解决2：修改环境变量
  - touch ~/.bash_profile
  - vim ~/.bash_profile
  - 修改打开的.bash_profile文件：
```
export NODE_PATH="/usr/local/lib/node_modules"
```
  - 使修改生效
    source ~/.bash_profile
b. 若命令为webpack --watch，动态监听文件的改变并实时打包，输出新bundle.js文件；但不能作到hot replace，即每次webpack编译以后，还需手动刷新浏览

配置webpack-dev-server：

a. webpack-dev-server简介：
- 是一个小型node.js express服务器
- 新建一个开发服务器，能够serve咱们pack之后的代码，而且当代码更新的时候自动刷新浏览器
- 启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的，实时编译后的文件都保存到了内存当中。
- 两种自动刷新方式：
  - iframe mode
    在网页中嵌入了一个 iframe ，将咱们本身的应用注入到这个 iframe 当中去，所以每次你修改的文件后，都是这个 iframe 进行了 reload
    命令行：webpack-dev-server，无需--inline
    浏览器访问：http://localhost:8080/webpack-dev-server/index.html
  - inline mode
    命令行：webpack-dev-server --inline
    浏览器访问：http://localhost:8080
b. 安装webpack-dev-server
npm install webpack-dev-server --save-dev
可在项目根目录下安装（不加-g，在项目根目录出现node_modules文件夹，内含webpack-dev-server及其依赖包），也可全局安装（加-g 必须sudo）

c. 在webpack.config.js中添加配置

var webpack=require('webpack'); module.exports = { …… devServer: {  historyApiFallback: true,  inline: true,//注意：不写hot: true，不然浏览器没法自动更新；也不要写colors:true，progress:true等，webpack2.x已不支持这些 }, plugins:[ …… new webpack.HotModuleReplacementPlugin() ] …… };

d. 在package.json里配置运行的命令（npm支持自定义一些命令）

"scripts": { 　　"start": "webpack-dev-server --inline"//注意：不写--hot，不然浏览器没法自动更新 },

e. 运行server
- npm start
  - Error: .........（此处省略一堆错误）
  - 解决：在本项目中安装webpack：（不加-g，在项目根目录出现node_modules文件夹，内含webpack及其依赖包）
    npm install webpack
- 浏览器打开http://localhost:8080/

webpack 打包工具使用指南

写在前面的话

什么是WebPack，为何要使用它？

为什要使用WebPack

什么是Webpack

WebPack和Grunt以及Gulp相比有什么特性

开始使用Webpack

安装

正式使用Webpack前的准备

正式使用Webpack

经过配置文件来使用Webpack

更快捷的执行打包任务

Webpack的强大功能

生成Source Maps（使调试更容易）

使用webpack构建本地服务器

Loaders

Babel

Babel的安装与配置

Babel的配置

一切皆模块

CSS

CSS module

CSS预处理器

插件（Plugins）

使用插件的方法

HtmlWebpackPlugin

Hot Module Replacement

产品阶段的构建

优化插件

缓存

写在前面的话

什么是WebPack，为何要使用它？

为什要使用WebPack

什么是Webpack

WebPack和Grunt以及Gulp相比有什么特性

开始使用Webpack

安装

正式使用Webpack前的准备

正式使用Webpack

经过配置文件来使用Webpack

更快捷的执行打包任务

Webpack的强大功能

生成Source Maps（使调试更容易）

使用webpack构建本地服务器

Loaders

Babel

Babel的安装与配置

Babel的配置

一切皆模块

CSS

CSS module

CSS预处理器

插件（Plugins）

使用插件的方法

HtmlWebpackPlugin

Hot Module Replacement

产品阶段的构建

优化插件

缓存

在项目根目录运行webpack

配置webpack-dev-server：

经过配置文件来使用`Webpack`

经过配置文件来使用`Webpack`