你的位置:首页 > Java教程

[Java教程]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