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
(也可以使用loaders
loader
) 此条规则应用哪些预处理器。接受参数为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
中,首先加入了期望的注释,同时最上面加入了严格模式标签。
大功告成!