在学习react的时候经常遇到别人所说的webpack，出于好奇我花费了半天的时间学习了一下它，不得不说webpack很强大，很适用于实际开发。
webpack和gulp
webpack和gulp相似，可以取代一部分gulp的操作（压缩/合并/编译文件等），gulp的配置文件是gulpfile.js，而webpack的配置文件是webpack.config.js。本人比较喜欢gulp的管道编写方式，但是webpack编写起来也不麻烦，而且支持CommonJS的书写方式。
安装webpack
你需要全局安装webpack和它的服务端webpack-dev-server
npm install webpack -g
npm install webpack-dev-server -g
使用webpack
就像gulp一样，你需要一个配置文件（配置文件不是必须的，webpack允许直接在控制台操作，但是会很麻烦）。下面通过几个例子来说明如何使用webpack
一、ES6转ES5
第一个例子是将es6转化成es5，新建wp-es6-5文件夹
安装插件
npm install babel-core babel-preset-es2015 --save-dev
npm install babel-loader --save-dev //webpack的babel加载器
下面来配置webpack.config.js
module.exports={
entry:"./main.js", //webpack的入口文件
output:{
path:"./bin", //指定入口文件编译后输出的路径
filename:"app.js" //指定入口文件编译后输出的文件名
},
module:{
loaders:[{ //loaders是一个数组，由若干个对象组成，每个对象就是一个操作
test:/\.js$/, //对js文件生效
exclude:/node_modules/, //操作不包括node_modules文件夹
loader:"babel-loader", //使用babel加载器，为了书写方便也可以把-loader去掉
query:{
presets:["es2015"] //执行babel的es2015转换规则
}
}]
}
}
写一下入口文件吧
//main.js
class MyClass{
constructor(x,y){
this.x=x;
this.y=y;
}
print(){
return `(${this.x},${this.y})`;
}
}
var myclass=new MyClass(2,3);
console.log(myclass.print());
下面打开命令行，进入到当前文件夹下（wp-es6-5），运行webpack
此时你会发现多了一个bin文件夹，里面含有一个app.js，说明webpack已经成功地将main.js转换成了es5并保存在了bin文件夹下面的app.js中。我们可以看一下app.js中的内容
//部分代码
var MyClass = function () {
function MyClass(x, y) {
_classCallCheck(this, MyClass);
this.x = x;
this.y = y;
}
_createClass(MyClass, [{
key: "print",
value: function print() {
return "(" + this.x + "," + this.y + ")";
}
}]);
return MyClass;
}();
var myclass = new MyClass(2, 3);
console.log(myclass.print());
不得不说webpack添加了很多其他的代码，但是es6的确转换成了es5。
我们在根目录下新建一个index.html
<html>
<body>
<script src="bin/app.js"></script>
</body>
</html>
在浏览器端运行index.html，在控制台里可以看到正确地运行结果(2,3)
我们也可以将webpack更加人性化一些，比如显示进度条或者实时监听，只需要运行webpack时加上后续指令
webpack --progress //编译时显示进度条
webpack --colors //增加配色
webpack --watch //实时监听
webpack --progress --colors --watch //整合以上功能
二、CSS模块加载
webpack的模块加载机制不止适用于js，css/image均可以通过require加载。新建wp-css文件夹
安装插件
npm install style-loader --save-dev
npm install css-loader --svae-dev
配置webpack.config.js
module.exports={
entry:"./main.js",
output:{
path:__dirname+"/bin",//__dirname代表当前webpack.config.js所在的路径
filename:"app.js"
},
module:{
loaders:[{
test:/\.css$/,
exclude:/node_modules/,
loader:"style!css"//多个加载器通过字符串的形式以!分离
}]
}
}
为了体现webpack对CommonJS的支持，我新建了export.js导出模块，入口文件main.js引入它
//exports.js
var obj={name:"SunnyChuan",age:21};
module.exports=obj;
//style.css
body {
background-color: #68b1ed;
}
//main.js
require("!style!css!./style.css");
var obj=require("./export.js");
doucment.body.innerHTML=obj.name+" "+obj.age;
和例子一相同，我们需要一个index.html文件引入app.js，在浏览器中运行
三、React+ES6
安装react和所需插件，既然目前react流行es6的书写，那就把es6转es5所需插件也安装上
npm install react --save-dev
npm install react-dom --save-dev
npm install babel-core --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-react //将jsx语法转换成正常js的规则
npm install babel-loader
配置webpack.config.js
module.exports={
entry:"./main.js",
output:{
path:__dirname+"/bin",
filename:"app.js"
},
module:{
loaders:[{
test:/\.js$/,
exclude:/node_modules/,
loader:"babel",
query:{
presets:["es2015","react"] //执行babel的es2015和react转换规则
}
}]
}
}
用react书写入口文件
//main.js
import React from 'react'; //现在可以用es6写react了
import ReactDOM from 'react-dom';
var MyComponent=React.createClass({
render:function(){
return (<div>Hello,SunnyChuan</div>);
}
});
ReactDOM.render(<MyComponent/>,document.getElementById("ss"));
<!--index.html-->
<html>
<body>
<div id="ss"></div>
<script src="bin/app.js"></script>
</body>
</html>
运行webpack后打开index.html
四、UglifyJs插件
webpack自带了一些插件，通过模块导入后可以直接使用
配置webpack.config.js
var webpack = require("webpack");//UglifyJs是webpack自带的插件，因此无需自己安装
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin; //获取uglifyJS插件
module.exports = {
entry: "./main.js",
output: {
path: "./bin",
filename: "app.js"
},
plugins: [
new uglifyJsPlugin({ //plugins是一个数组，每一个成员都是一个插件，只需要require相应插件并添加到该数组中完成相应的配置即可
compress: {
warnings: false
}
})
]
}
我在入口文件中写了一个数组去重函数
var func=function(arr){
var temp=[];
for(var i =0;i<arr.length;i++){
if(temp.indexOf(arr[i])==-1)temp.push(arr[i]);
}
return temp;
}
console.log(func([1,1,2,2,3,3]));
运行webpack后打开bin文件夹下的app.js，代码的确压缩了，但也得不可读了
!function(r){function n(e){if(o[e])return o[e].exports;var t=o[e]={exports:{},id:e,loaded:!1};return r[e].call(t.exports,t,t.exports,n),t.loaded=!0,t.exports}var o={};return n.m=r,n.c=o,n.p="",n(0)}([function(r,n){var o=function(r){for(var n=[],o=0;o<r.length;o++)n.indexOf(r[o])==-1&&n.push(r[o]);return n};console.log(o([1,1,2,2,3,3]))}]);
在bin文件夹下使用node运行app.jsnode app，显示的结果是[1,2,3]，说明代码压缩成功
HTML插件和OpenBrowser插件
HTML插件用于自动生成index.html，OpenBrowser则是自动打开index.html。与UglifyJs不同的是，这两个插件都不是webpack自带的插件，因此需要npm安装。
npm安装的插件名称需要在官网的list of plugins中找到自己要用到的插件，然后将该插件的驼峰命名法转化为小写并且单词见用“-”链接即可。比如官网中的HtmlWebpackPlugin对应着html-webpack-plugin
npm install html-webpack-plugin --save-dev
npm open-browser-webpack-plugin --save-dev
配置webpack.config.js
var HtmlwebpackPlugin = require('html-webpack-plugin'); //引入相应的插件，注意写法上和webpack自带插件的区别
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
module.exports = {
entry: './main.js', //在本例中不需要自己的js文件，但是入口文件是必须的，因此需要新建一个入口文件，里面可以什么都不写
output: {
path: __dirname,
filename: 'app.js'
},
plugins: [
new HtmlwebpackPlugin({
title: 'Webpack-demos',
filename: 'index.html'
}),
new OpenBrowserPlugin({
url: 'http://localhost:8080'
})
]
};
运行webpack后会发现根目录生成了一个index.html，内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack-demos</title>
</head>
<body>
<script type="text/javascript" src="app.js"></script></body>
</html>
运行webpack-dev-server开启服务器后会自动打开index.html
将最终打包的js文件和框架（库）分离开
webpack默认是将你的入口文件所引入的库和框架全部打包到最终文件，假设现在存在一个入口文件main.js，里面使用了react+es6的写法，那么最终打包出来的文件可能达到几kb的大小，而其中绝大多数代码都是react的。使用CommonsChunkPlugin可以解决这个问题
var webpack=require("webpack");
module.exports={
entry:{//定义两个入口文件，一个用于包含业务逻辑，一个用于包含框架（库）
vendor:["react","react-dom"],
main:"./main.js",
},
output:{
path:__dirname,
filename:"app.js",
},
module:{
loaders:[{
test:/\.js$/,
exclude:/node_modules/,
loader:"babel",
query:{
presets:["react","es2015","stage-0"]
}
}]
},
plugins:[
new webpack.optimize.CommonsChunkPlugin({
name:"vendor",//匹配上述的入口文件
filename:"vendor.js"//单独生成vendor.js
})
]
}
你会发现app.js的大小骤减，因为react的代码已经从app.js中抽离到vendor.js里了，接下来只需将app.js和vendor.js这两个文件引入到html中即可（vendor要在app之前）。
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<div id="ss"></div>
<script src="vendor.js"></script>
<script src="app.js"></script>
</body>
</html>
总结
webpack是一个十分强大的工具，本文只是简单地对一些自动化操作进行了配置，除了本文介绍的jsx/es6的编译外，sass和less的编译也是比较常用的，loader的写法都相似。webpack支持很多插件，可以通过官方文档和阮一峰的webpack教程进行学习。
网友评论