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 | "scripts": { |
创建项目文件
建立资源目录 ./src
,以及组件目录 ./src/components
为了以后的插件部分,我这里使用了ES5,因为压缩混淆插件好像无法处理ES6代码,会报错。但是webpack2是完全支持ES6(import等语法)的。
建立一个组件./src/components/log.js
1 | module.exports = function (s) { |
建立两个入口文件,分别是./src/page1.js
./src/page2.js
1 | var log = require('./components/log') |
1 | var log = require('./components/log') |
配置webpack
建立文件 webpack.config.js
1 | const path = require('path'); |
进行打包
控制台执行 npm run webpack
即可。
在目录下多出了dist
目录,并带有 page1.bundle.js
page2.bunlde.js
。
我们最简单的例子完成了~
第二个例子 demo2 引入loaders webpack2-demo2
首先复制一下demo1,我们在之前的代码基础上增加内容。
为了简单,我自己写了两个loader。无需过多了解,知道能用就行了。
./strict-loader.js
严格模式插件,会在代码块(chunk)最前面加入 'use strict;'
标志。
1 | module.exports = function (source) { |
comment-loader.js
代码块(chunk)注释插件,会在代码块前后加入等号,并写入 some-file.js comment v1.0
这种形式标记。
1 | const path = require('path'); |
修改webpack配置文件
我们要实现的功能是:
- 自动处理入口文件
- 每个非组件的代码块(chunk),要先进行版本显示,形式为 some-file.js MAIN v1.1,之后在加入严格模式
- 每个组件的代码块(chunk),直接进行版本显示,形式为 some-file.js COMPONENTS v1.0
我们要在webpack.config.js
中增加一段 module
。最终如下:
1 | const path = require('path'); |
需要说明的是:
- 现在的预处理规则,要放在
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 | /************************************************************************/ |
其中组件 log.js
中,加入了我们期望的注释。 page1.js
中,首先加入了期望的注释,同时最上面加入了严格模式标签。
大功告成!