webpack 学习笔记

一个简单的例子，明白了是怎么操作，文件怎么制作的。在我看来和gulp／grunt区别不算太大，但很多人都说比较好，先进多了

WebPack

官网地址：  http://webpack.github.io/

安装： #npm install -g webpack

 或       #npm install webpack -g

如果是linux／mac 可以用 ＃sudo npm install -g webpack

创建工程 

（1）创建目录并进入目录

#mkdir webpack_test && cd webpack_test

（2）创建package.json

＃nam init  

//一路回车就行

(3)下载 工程的webpack

＃npm install webpack --save-dev

# npm install jsx-loader  --save-dev  //react jsx 

# npm install style-loader   --save-dev  //style // style css less都有依赖

# npm install css-loader   --save-dev  // css

# npm install less-loader   --save-dev  //less 加载

less

(4)创建webpack.config.js 文件

＃touch webpack.config.js

(5)编辑webpack.config.js 文件

＃vi webpack.config.js

var webpack = require('webpack');

// var less = require('less');

module.exports = {

/**

* [context description]base目录

* @type {String}

*/

context:__dirname+"/src/",

/**

* [entry description] 模块入口

* @type {String 或 Array 或 Object}

* 值可以省略后缀 .js

*/

entry: './index',

/**

* [output description]设置输入目录和文件名

* 可以设置

* @type {Object}

*/

output:{

path:"./dist",

filename:"[name].min.js"

},

/**

* [module description]加载器配置

* @type {Object} 每一种文件都需要使用什么加载器来处理。 所有加载器需要使用npm来加载

*/

module:{

loaders:[

{

test:/\.less$/,loader: "style!css!less"

}

]

},

/**

* [resolve description] 配置别名

* @type {Object}

*/

resolve:{

alias:{

}

},

/**

* [plugins description]插件

* @type {Object}

*/

plugins:{

}

}

创建js文件

＃mkdir src && cd src

# touch index.js

#vi index.js

console.log("Hello World!");

#webpack

#touch main.less

#vi main.less

@bg: #eee;

@fontSize: 40px;

body{

background:@bg;

font-size:@fontSize;

}

#vi index.js

添加require("./main.less");

执行 

＃webpack --display-error-details -w //清楚查看错误

或 

＃webpack 

对于配置express＋webpack 

我从github上下载了一个例子

网址：https://github.com/kenanpengyou/express-webpack-full-live-reload-example.git

下载后

进入目录

＃npm install

完成后 

浏览：＃node app_browsersync

生成文件也就是webpack命令＃webpack

发布＃webpack --config webpack.production.config.js -p 

＃ node app

 源码：链接: https://pan.baidu.com/s/1boFCxJL 密码: itn8

原标题：webpack 学习笔记

关键词：web