此处输入图片的描述

webpack是最近非常流行的一个模块加载器，它不仅能够像require.js一样，能够加载js文件，还能加载css,png等文件。在某些时候，也能够替代gulp，grunt等自动构建工具，功能可以说是非常强大。不过功能强大的同时学习曲线也很陡峭，花了很长的时间才得以入门，在这里分享一下我的经验，如有不足之处还请指出。

安装webpack

首先需要安装Node.js
初始化项目（这里会要求你回答一系列问题，如果不在意可以一路回车）：
npm init
安装webpack，并将依赖关系添加到package.json:
npm install webpack --save-dev

目录结构

项目的目录结构是这样的：

1
2
3
4
5
6
7
8
9
10
├── src                 #源码目录
|   ├──js               #存放js文件
|   |──scss             #存放sass文件
|   |──images           #存放图片资源文件
├── dist                #发布目录
├── index.html          #页面入口
├── node_modules        #包文件夹
├── .gitignore     
├── webpack.config.js   #webpack配置文件
└── package.json

一个简单的webpack

配置webpack

webpack使用webpack.config.js文件进行项目配置，所以我们需要在项目的根目录下创建这个文件， 一个简单的配置文件如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//webpack.config.js
var path = require('path');

module.exports = {
    //入口文件配置
    entry: path.resolve(__dirname, 'src/js/main.js'),
    //入口文件输出配置
    output: {
        //输出路径
        path: path.resolve(__dirname, 'dist/js'),
        //输出后的文件名
        filename: 'bundle.js',
    },
};

启动webpack

命令行

1
2
3
4
webpack           //最基本的webpack启动方法
webpack -p        //对打包后的文件进行压缩，用于生产环境
webpack -w        //监视文件改动，实时进行打包更新
webpack -d        //让他生成SourceMaps，方便调试

成功运行命令之后就会发现在dist文件夹下生成了bundle.js
之后在html文件中引入就行
<script src="./dist/bundle.js"></script>

配置loaders

webpack提供了许多的loader用于加载不同的文件，这也是webpack的强大之处，有了这些loader，我们就可以使用最新的ES6/7语法写js，用SASS/LESS写css。下面介绍我常用的loader，更多的loader查看这里。

加载JS文件

ES6已经发布了有些时间了，新的ES7也正在制定中。作为新时代的好青年，我们怎能不去试试新的东西，只是目前的大多数浏览器对于ES6的支持并不完善，为此我们需要使用babel将ES6转换成ES5。关于ES6的教程，可以参考阮一峰的《ECMAScript6入门》。
我在项目中通常会使用bower管理插件，所以还需要将bower_components添加到搜索路径中，并使用插件从bower.json文件中指定main属性作为插件的入口。
安装babel相关的包
npm install babel-loader babel-core babel-preset-es2015 --save-dev
加入babel-loader，因为npm包是用ES5编写，不需要对其进行编译，所以使用exclude将node_modules文件夹排除在外，也可以加快编译速度。

1
2
3
4
5
6
7
8
9
10
11
12
13
module: {
    loaders: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: '/node_modules/',
            query: {
                cacheDirectory: true,
                presets: ['es2015'],
            }
        },
    ]
},

将bower_components加入到默认搜索路径中

1
2
3
4
5
resolve: {
    root: [
        path.join(__dirname, "bower_components")
    ]
},

从bower.json 的main属性中指定插件的入口

1
2
3
4
5
6
7
var webpack = require('webpack');

plugins: [
    new webpack.ResolverPlugin(
        new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(".bower.json", ["main"])
    ),
]

加载样式文件

为了加载css文件我们需要使用style-loader和css-loader
npm install style-loader css-loader --save-dev
作为一名sass爱好者，脱离了sass写样式就各种不舒服斯基，因此我们需要sass-loader
npm install sass-loader --save-dev
同时我们还可以使autoprefixer自动补全浏览器前缀，省去了为了浏览器兼容性写各种前缀的麻烦。关于autoprefixer的配置可以参考这里
npm install autoprefixer-loader --save-dev

不同的loader之间用 ! 号连接

1
2
3
4
{
    test: /\.scss$/,
    loader: 'style!css!autoprefixer?browsers=last 2 version!sass'
}

当我们使用require('../scss/style.scss')加载样式文件时，则会将样式文件直接使用<style>标签插入到HTML文件中，不过有的时候我们可能还是希望将样式作为css文件导出，病使用<link>引入，这时候就需要插件配合了。
安装插件
npm install extract-text-webpack-plugin --save-dev
将插件添加到配置文件中

1
2
3
4
5
6
7
8
var ExtractTextPlugin = require("extract-text-webpack-plugin");
//...省略其它代码
module: {
        loaders: [
            { test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")},
plugins: [
        new ExtractTextPlugin("[name].css")
    ]

在ExtractTextPlugin的extract方法有两个参数，第一个参数是经过编译后通过style-loader单独提取出文件来，而第二个参数就是用来编译代码的loader。

如果需要将所有样式文件打包成一个文件，加一个参数即可。

new ExtractTextPlugin("style.css", {allChunks: true})

##加载图片资源
对于webpack来说，所有的资源都是可以作为模块加载的，图片也是一样。
安装loader
npm install url-loader
添加到配置文件
{ test: /\.(jpe?g|png)$/, loader: "url?limit=8192" }
?limit是指当图片文件小于8kb时就会将图片转换成base64编码，我们可以在js中使用require()引入。

1
2
var img = document.createElement("img");
img.src = require('../images/xxx.png');

其它

多个入口

有时候我们可能一个项目中有着许多的页面，每个页面加载相对应的JS文件，这时候我们就需要添加多个入口文件

1
2
3
4
5
6
7
8
9
10
11
12
//webpack.config.js

module.exports = {
    entry: [
        index: 'src/js/index.js',
        content: 'src/js/content.js'
    ]
    output: {
        path: 'dist',
        filename: '[name].bundle.js',
    },
};

这样就会为每个入口都生成对应构建好的文件，index页面就是index.bundel.js。

使用别名

引入文件的时候需要写出那个文件所在的路径，对于一些目录结构复杂的项目可能会比较麻烦，这时候我们就可以给文件夹取个别名。

1
2
3
4
5
6
7
8
9
10
//webpack.config.js
var path = require('path');

resolve: {
        alias: {
            js: path.join(__dirname, "src/js"),
            scss: path.join(__dirname, 'src/scss'),
            img: path.join(__dirname, 'src/iamges'),
        }
    },

使用前我们是这样引入样式的
require('../scss/style.scss')

使用后是这样

require('scss/style.scss')

代码压缩

当代码用于生产环境时，通常都要对代码进行压缩，以减少文件体积。webpack提供了UglifyJsPlugin用于压缩、混淆代码。

1
2
3
4
5
6
7
8
9
var webpack = require('webpack');

plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
]

尾巴

最后给出一个完整的wepack配置文件作为参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: [
        './src/js/main.js',
    ],
    output: {
        path: path.join(__dirname, 'build/js'),
        filename: '[name].bundle.js',
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                //只编译src目录下文件
                exclude: '/node_modules/',
                query: {
                    cacheDirectory: true,
                    presets: ['es2015'],
                }
            },
            { test: /\.css$/, loader: 'style!css!autoprefixer?browsers=last 2 version' },
            { test: /\.scss$/, loader: 'style!css!autoprefixer?browsers=last 2 version!sass' },
            //使用base64编码加载小于8kb的图片
            { test: /\.(jpe?g|png)$/, loader: "url?limit=8192" },
        ]
    },
    resolve: {
        //可以使用 require('main') 替代 require('main.js')
        extensions: ['', '.js'],
        //添加默认搜索路径
        root: [
            path.join(__dirname, "bower_components")
        ],
        //文件夹别名
        alias: {
            js: path.join(__dirname, "src/js"),
            scss: path.join(__dirname, 'src/sass'),
            img: path.join(__dirname, 'src/img'),
        }
    },
    plugins: [
        //从bower.json main属性指定文件入口
        new webpack.ResolverPlugin(
            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(".bower.json", ["main"])
        ),
        //代码压缩
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
    ]
}