在學(xué)習(xí)react的時(shí)候經(jīng)常遇到別人所說的webpack佛析，出于好奇我花費(fèi)了半天的時(shí)間學(xué)習(xí)了一下它痹仙，不得不說webpack很強(qiáng)大闷游，很適用于實(shí)際開發(fā)。
webpack和gulp
webpack和gulp相似烙样，可以取代一部分gulp的操作（壓縮/合并/編譯文件等）冯遂，gulp的配置文件是gulpfile.js，而webpack的配置文件是webpack.config.js谒获。本人比較喜歡gulp的管道編寫方式蛤肌，但是webpack編寫起來也不麻煩，而且支持CommonJS的書寫方式批狱。
安裝webpack
你需要全局安裝webpack和它的服務(wù)端webpack-dev-server
npm install webpack -g
npm install webpack-dev-server -g
使用webpack
就像gulp一樣裸准，你需要一個(gè)配置文件（配置文件不是必須的，webpack允許直接在控制臺(tái)操作赔硫，但是會(huì)很麻煩）狼速。下面通過幾個(gè)例子來說明如何使用webpack
一、ES6轉(zhuǎn)ES5
第一個(gè)例子是將es6轉(zhuǎn)化成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是一個(gè)數(shù)組，由若干個(gè)對(duì)象組成恼蓬，每個(gè)對(duì)象就是一個(gè)操作
test:/\.js$/, //對(duì)js文件生效
exclude:/node_modules/, //操作不包括node_modules文件夾
loader:"babel-loader", //使用babel加載器惊完，為了書寫方便也可以把-loader去掉
query:{
presets:["es2015"] //執(zhí)行babel的es2015轉(zhuǎn)換規(guī)則
}
}]
}
}
寫一下入口文件吧
//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());
下面打開命令行，進(jìn)入到當(dāng)前文件夾下（wp-es6-5）处硬，運(yùn)行webpack
此時(shí)你會(huì)發(fā)現(xiàn)多了一個(gè)bin文件夾小槐，里面含有一個(gè)app.js，說明webpack已經(jīng)成功地將main.js轉(zhuǎn)換成了es5并保存在了bin文件夾下面的app.js中荷辕。我們可以看一下app.js中的內(nèi)容
//部分代碼
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的確轉(zhuǎn)換成了es5。
我們?cè)诟夸浵滦陆ㄒ粋€(gè)index.html
<html>
<body>
<script src="bin/app.js"></script>
</body>
</html>
在瀏覽器端運(yùn)行index.html疮方，在控制臺(tái)里可以看到正確地運(yùn)行結(jié)果(2,3)
我們也可以將webpack更加人性化一些控嗜，比如顯示進(jìn)度條或者實(shí)時(shí)監(jiān)聽，只需要運(yùn)行webpack時(shí)加上后續(xù)指令
webpack --progress //編譯時(shí)顯示進(jìn)度條
webpack --colors //增加配色
webpack --watch //實(shí)時(shí)監(jiān)聽
webpack --progress --colors --watch //整合以上功能
二骡显、CSS模塊加載
webpack的模塊加載機(jī)制不止適用于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代表當(dāng)前webpack.config.js所在的路徑
filename:"app.js"
},
module:{
loaders:[{
test:/\.css$/,
exclude:/node_modules/,
loader:"style!css"http://多個(gè)加載器通過字符串的形式以!分離
}]
}
}
為了體現(xiàn)webpack對(duì)CommonJS的支持惫谤，我新建了export.js導(dǎo)出模塊壁顶，入口文件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;
和例子一相同，我們需要一個(gè)index.html文件引入app.js溜歪，在瀏覽器中運(yùn)行
三若专、React+ES6
安裝react和所需插件，既然目前react流行es6的書寫蝴猪，那就把es6轉(zhuǎn)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語(yǔ)法轉(zhuǎn)換成正常js的規(guī)則
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"] //執(zhí)行babel的es2015和react轉(zhuǎn)換規(guī)則
}
}]
}
}
用react書寫入口文件
//main.js
import React from 'react'; //現(xiàn)在可以用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>
運(yùn)行webpack后打開index.html
四调衰、UglifyJs插件
webpack自帶了一些插件膊爪，通過模塊導(dǎo)入后可以直接使用
配置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是一個(gè)數(shù)組窖式，每一個(gè)成員都是一個(gè)插件蚁飒，只需要require相應(yīng)插件并添加到該數(shù)組中完成相應(yīng)的配置即可
compress: {
warnings: false
}
})
]
}
我在入口文件中寫了一個(gè)數(shù)組去重函數(shù)
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]));
運(yùn)行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運(yùn)行app.jsnode app淮逻，顯示的結(jié)果是[1,2,3]，說明代碼壓縮成功
HTML插件和OpenBrowser插件
HTML插件用于自動(dòng)生成index.html阁簸，OpenBrowser則是自動(dòng)打開index.html爬早。與UglifyJs不同的是，這兩個(gè)插件都不是webpack自帶的插件启妹，因此需要npm安裝筛严。
npm安裝的插件名稱需要在官網(wǎng)的list of plugins中找到自己要用到的插件，然后將該插件的駝峰命名法轉(zhuǎn)化為小寫并且單詞見用“-”鏈接即可饶米。比如官網(wǎng)中的HtmlWebpackPlugin對(duì)應(yīng)著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'); //引入相應(yīng)的插件桨啃，注意寫法上和webpack自帶插件的區(qū)別
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
module.exports = {
entry: './main.js', //在本例中不需要自己的js文件，但是入口文件是必須的檬输，因此需要新建一個(gè)入口文件照瘾，里面可以什么都不寫
output: {
path: __dirname,
filename: 'app.js'
},
plugins: [
new HtmlwebpackPlugin({
title: 'Webpack-demos',
filename: 'index.html'
}),
new OpenBrowserPlugin({
url: 'http://localhost:8080'
})
]
};
運(yùn)行webpack后會(huì)發(fā)現(xiàn)根目錄生成了一個(gè)index.html，內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack-demos</title>
</head>
<body>
<script type="text/javascript" src="app.js"></script></body>
</html>
運(yùn)行webpack-dev-server開啟服務(wù)器后會(huì)自動(dòng)打開index.html
將最終打包的js文件和框架（庫(kù)）分離開
webpack默認(rèn)是將你的入口文件所引入的庫(kù)和框架全部打包到最終文件丧慈，假設(shè)現(xiàn)在存在一個(gè)入口文件main.js析命，里面使用了react+es6的寫法，那么最終打包出來的文件可能達(dá)到幾kb的大小逃默，而其中絕大多數(shù)代碼都是react的鹃愤。使用CommonsChunkPlugin可以解決這個(gè)問題
var webpack=require("webpack");
module.exports={
entry:{//定義兩個(gè)入口文件，一個(gè)用于包含業(yè)務(wù)邏輯完域，一個(gè)用于包含框架（庫(kù)）
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"http://單獨(dú)生成vendor.js
})
]
}
你會(huì)發(fā)現(xiàn)app.js的大小驟減软吐，因?yàn)閞eact的代碼已經(jīng)從app.js中抽離到vendor.js里了，接下來只需將app.js和vendor.js這兩個(gè)文件引入到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>
總結(jié)
webpack是一個(gè)十分強(qiáng)大的工具关噪，本文只是簡(jiǎn)單地對(duì)一些自動(dòng)化操作進(jìn)行了配置，除了本文介紹的jsx/es6的編譯外乌妙，sass和less的編譯也是比較常用的使兔，loader的寫法都相似。webpack支持很多插件藤韵，可以通過官方文檔和阮一峰的webpack教程進(jìn)行學(xué)習(xí)虐沥。
