本文是一个简单的webpack入门教程，希望能够帮助webpack初学者快速上手。如有错误，敬请斧正。
本文所有的demo都可以在webpack-demo里找到，git clone之后需要执行npm install安装所有依赖包。

简介

webpack是一个模块打包工具，出自德国开发者Tobias Koppers之手，处理速度很快。在webpack看来，一切资源都可以是一个模块，不仅限于js文件。正是由于这些特点，使得webpack可以替代Grunt和Gulp，成为了目前业内最火的前端构建工具。

安装

webpack可以安装到全局，也可以作为项目的依赖工具安装到项目中

// 全局安装
$ npm install -g webpack
$ npm install -g webpack-dev-server

如果报没有权限的话，在命令前面加上sudo就可以了

// 局部安装
$ npm install --save-dev webpack
$ npm install --save-dev webpack-dev-server

可以看到，我们在安装webpack的同时，也安装了webpack-dev-server。那么webpack-dev-server是什么呢？它是一个轻量级的基于express的node.js服务器，用来服务资源文件。不是必须的，但是建议一起安装。

命令行

$ webpack main.js bundle.js

以上是直接使用webpack命令行来进行打包的命令，把main.js构建成bundle.js，具体示例可以查看demo1，在文件夹中执行上方的命令即可。

webpack有一些参数是我们应该要知道的

webpack: 构建一次开发版本
webpack -p: 构建一次产品版本，与开发版本的区别是会对文件进行压缩
webpack -d: 添加source map
webpack --watch: 监听文件的改动，持续增量构建
webpack --colors: 让命令行的输出更好看一点（实际使用zsh的命令行时发现并没有区别）

配置文件

webpack还有很多强大的功能，这些都可以在命令行使用，但是如果都写在命令行，既不方便使用，也不能直观地反映各个配置项，这时候，就需要配置文件登场了。

webpack默认使用的配置文件名是webpack.config.js，也可以通过--config参数在命令行指定另一个命名的配置文件。配置文件其实也是一个模块，所有的构建信息都放在module.exports中。下面我们就来讲一讲各个重要的配置项。

以下各个示例请在各demo文件夹中执行webpack-dev-server进行查看

入口文件

入口文件的配置项名称是entry，代表了webpack给整个项目进行打包的一个主入口，可以搭配output属性指定的输出文件来使用

// webpack.config.js

module.exports = {
    entry: 'main.js',
    output: {
        filename: 'bundle.js'
    }
};

// index.html




    
    Demo2


    



// main.js

document.write('Hello Webpack!
');

示例见demo2

多入口文件

在多页的应用中，我们需要有多个入口文件，这在webpack中也是可以支持的。

// webpack.config.js

module.exports = {
    entry: {
        profile: './profile.js',
        feed: './feed.js'
    },
    output: {
        filename: '[name].bundle.js'
    }
};

// feed.html




    
    Demo3-Feed


    



// feed.js

document.write('Hello Feed!');

// profile.html




    
    Demo3-Profile


    



// profile.js

document.write('Hello Profile!
');

示例见demo3，在demo3文件夹中启动webpack-dev-server，访问localhost:8080/profile.html和localhost:8080/feed.html查看效果。

Loaders

Loaders顾名思义就是加载器，用于加载各种格式的文件，例如React使用的JSX，ES6和ES7，图片、CSS、JSON文件等，可谓是webpack中最核心的功能之一。官方文档中列出了所有可用的loaders。

loaders配置在module.exports中的module字段下（说起来有点绕，待会儿看代码就懂了），是一个数组，代表loader的集合，每一个loader有几个配置项：

test: 正则表达式，用于匹配文件的路径，一般都直接用来匹配文件后缀，在复杂的场景下，可以针对同一类型的不同文件做不同处理
loader: loader的名称，实际使用时可以省略-loader的后缀（例如css-loader，可以写成css）
include: 必须包含的文件路径
exclude: 不需要处理的文件路径
query: loader的额外设置选项

下面我介绍几个常用的loader。

CSS Loader

先安装style-loader和css-loader。其中，style-loader用来向 HTML 页面中插入

webpack入门指南

简介

安装

命令行

配置文件

入口文件

Hello Webpack!

多入口文件

Hello Feed!

Hello Profile!

Loaders

CSS Loader