在学习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的bable加载器
~~~
下面来配置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.js`node app`，显示的结果是`[1,2,3]`，说明代码压缩成功
####HTML插件和OpenBrowser插件
HTML插件用于自动生成index.html，OpenBrowser则是自动打开index.html。与UglifyJs不同的是，这两个插件都不是webpack自带的插件，因此需要npm安装。
npm安装的插件名称需要在官网的[list of plugins](http://webpack.github.io/docs/list-of-plugins.html)中找到自己要用到的插件，然后将该插件的驼峰命名法转化为小写并且单词见用“-”链接即可。比如官网中的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
####总结
webpack是一个十分强大的工具，本文只是简单地对一些自动化操作进行了配置，除了本文介绍的jsx/es6的编译外，sass和less的编译也是比较常用的，loader的写法都相似。webpack支持很多插件，可以通过[官方文档](http://webpack.github.io/docs/)和阮一峰的[webpack教程](https://github.com/ruanyf/webpack-demos)进行学习。
- html/css
- 不一样的css3之Transform
- 不一样的css3之Transition
- 不一样的css3之Animation
- Less初学
- Sass初学
- 水平垂直居中那些事
- css优先级
- css基础教学
- javascript
- 浅谈javascript事件处理程序
- cookie,localStorage,sessionStorage的区别
- Ajax
- 说说JSON
- 数组常用的方法
- 字符串常用的方法
- 闭包之我的理解
- 常用DOM操作
- 扒一扒所谓的面向对象
- JS Blob对象
- ES6学习笔记（一）
- ES6学习笔记（二）
- 用ES6书写React
- React+Redux实战总结
- 基于Express搭建开发环境
- 其他
- github初学
- 轻松配置Webpack
- asp.net学习笔记
- ado.net
- 如何使用ajax进行前后端交互
- 银行大厅自助服务系统需求分析
- 西电银行开发手册
- 接口
- ajax