前端

webpack2入门-第一篇

2016年底，webpack2终于出来正式版了。改变的很少，基本上稍作修改就能兼容webpack1。改善了一些我认为太过于松散的配置，最终生成的代码质量更高。

webpack1系列的文章还没写完，其实也是有点乏了，后面还有一篇webpack-dev-server文章，初稿写好了，一直没审校，那就直接并入webpack2的入门文章吧~

第一个例子 demo1 入门 webpack2-demo1

建立项目

由于之前的文章为了方便，全局安装了webpack，这次2.0的webpack我就采用项目内安装。

首先要确保你在项目下初始化了 package.json文件

1
npm init

之后项目安装webpack2

1
npm i webpack -save-dev

package.json 中增加启动方法

1
2
3
"scripts": {
   "webpack":"webpack"
 }

创建项目文件

建立资源目录 ./src ，以及组件目录 ./src/components

为了以后的插件部分，我这里使用了ES5，因为压缩混淆插件好像无法处理ES6代码，会报错。但是webpack2是完全支持ES6（import等语法）的。

建立一个组件./src/components/log.js

1
2
3
module.exports = function (s) {
    console.log(s)
}

建立两个入口文件，分别是./src/page1.js ./src/page2.js

1
2
var log = require('./components/log')
log('this is page1')
1
2
var log = require('./components/log')
log('this is page2')

配置webpack

建立文件 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
const path = require('path');

module.exports = {
    entry: {
        page1: './src/page1',
        page2: './src/page2'
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].bundle.js"
    }
}

进行打包

控制台执行 npm run webpack 即可。

在目录下多出了dist 目录，并带有 page1.bundle.js page2.bunlde.js。

我们最简单的例子完成了~

第二个例子 demo2 引入loaders webpack2-demo2

首先复制一下demo1，我们在之前的代码基础上增加内容。

为了简单，我自己写了两个loader。无需过多了解，知道能用就行了。

./strict-loader.js

严格模式插件，会在代码块（chunk）最前面加入 'use strict;' 标志。

1
2
3
module.exports = function (source) {
    return '\'use strict\';\n' + source;
};

comment-loader.js

代码块（chunk）注释插件，会在代码块前后加入等号，并写入 some-file.js comment v1.0 这种形式标记。

1
2
3
4
5
6
7
8
const path = require('path');
module.exports = function (source) {
    var str = this.query.str || '';
    var ver = this.query.ver || '';
    var file = path.parse(this.resourcePath);
    var ret = '//--------' + file.base + ' ' + str + ' ' + ver + '--------\n' + source + '\n//------------------------';
    this.callback(null, ret, null);
};

修改webpack配置文件

我们要实现的功能是：

  • 自动处理入口文件
  • 每个非组件的代码块（chunk），要先进行版本显示，形式为 some-file.js MAIN v1.1，之后在加入严格模式
  • 每个组件的代码块（chunk），直接进行版本显示，形式为 some-file.js COMPONENTS v1.0

我们要在webpack.config.js中增加一段 module 。最终如下：

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
const path = require('path');

module.exports = {
    entry: {
        page1: './src/page1',
        page2: './src/page2'
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].bundle.js"
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: path.resolve(__dirname, './src/components/'),
            use: [
                // strict规则加载器，第二个执行
                // 如果当前规则加载器不需要配置，可以直接使用字符串
                path.resolve(__dirname, './strict-loader'),
                // comment规则加载器，第一个执行
                // 如果当前规则加载器需要配置，则需要使用array形式，并将加载器写成对象传入
                {
                    loader: path.resolve(__dirname, './comment-loader'),
                    options: {
                        str: 'MAIN',
                        ver: 'v1.1'
                    }
                }
            ]
        }, {
            test: /\.js$/,
            include: path.resolve(__dirname, './src/components/'),
            use: [{
                loader: path.resolve(__dirname, './comment-loader'),
                options: {
                    str: 'COMPONENTS',
                    ver: 'v1.0'
                }
            }]
        }]
    }
}

需要说明的是：

  • 现在的预处理规则，要放在 module.rules 下面，每个规则用一个对象表示。
  • 每个预处理规则中：
    • test 一般用于匹配文件扩展名
    • include 当前规则匹配的路径。如果匹配扩展名成功，匹配是否在 include 里面，如果是否，则不执行此条规则
    • exclude 当前规则不能匹配的路径。同 include ，如果匹配扩展名成功，匹配是否被exclude 排除掉，如果是排除掉，则不执行此条规则
    • 要想应用一条规则，相当于必须满足条件 (test && include && !exclude) === true
    • use（也可以使用loaders loader） 此条规则应用哪些预处理器。接受参数为array或者string，其中string仍然使用!进行分割。执行顺序同webpack1，从右到左（string形式），从下到上（array形式）
    • use 如果是写成对象形式的预处理器，直接使用options可以进行配置

打包查看效果

控制台执行 npm run webpack 即可。

在目录下多出了dist 目录，并带有 page1.bundle.js page2.bunlde.js。

检查其中一个文件，可以看到最后部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {

//--------log.js COMPONENTS v1.0--------
module.exports = function (s) {
    console.log(s)
}
//------------------------

/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";

//--------page1.js MAIN v1.1--------
var log = __webpack_require__(0)
log('this is page1')
//------------------------

/***/ })
/******/ ]);

其中组件 log.js 中，加入了我们期望的注释。 page1.js 中，首先加入了期望的注释，同时最上面加入了严格模式标签。

大功告成！