webpack2入门-第一篇
2016年底，webpack2终于出来正式版了。改变的很少，基本上稍作修改就能兼容webpack1。改善了一些我认为太过于松散的配置，最终生成的代码质量更高。
webpack1系列的文章还没写完，其实也是有点乏了，后面还有一篇webpack-dev-server文章，初稿写好了，一直没审校，那就直接并入webpack2的入门文章吧~
第一个例子 demo1 入门 webpack2-demo1
建立项目
由于之前的文章为了方便，全局安装了webpack，这次2.0的webpack我就采用项目内安装。
首先要确保你在项目下初始化了 package.json文件
npm init
之后项目安装webpack2
npm i webpack -save-dev
package.json 中增加启动方法
"scripts": {
"webpack": "webpack"
}
创建项目文件
建立资源目录 ./src ，以及组件目录 ./src/components
为了以后的插件部分，我这里使用了ES5，因为压缩混淆插件好像无法处理ES6代码，会报错。但是webpack2是完全支持ES6（import等语法）的。
建立一个组件./src/components/log.js
module.exports = function (s) {
console.log(s)
}
建立两个入口文件，分别是./src/page1.js ./src/page2.js
var log = require('./components/log')
log('this is page1')
var log = require('./components/log')
log('this is page2')
配置webpack
建立文件 webpack.config.js
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;' 标志。
module.exports = function (source) {
return '\'use strict\';\n' + source;
};
comment-loader.js
代码块（chunk）注释插件，会在代码块前后加入等号，并写入 some-file.js comment v1.0 这种形式标记。
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 。最终如下：
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（也可以使用loadersloader） 此条规则应用哪些预处理器。接受参数为array或者string，其中string仍然使用!进行分割。执行顺序同webpack1，从右到左（string形式），从下到上（array形式）use如果是写成对象形式的预处理器，直接使用options可以进行配置
打包查看效果
控制台执行 npm run webpack 即可。
在目录下多出了dist 目录，并带有 page1.bundle.js page2.bunlde.js。
检查其中一个文件，可以看到最后部分：
/************************************************************************/
/******/
([
/* 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 中，首先加入了期望的注释，同时最上面加入了严格模式标签。
大功告成！