webPack
Webpack是目前比较流行的前端打包工具，它同时支持AMD、CMD两种模块写法，也原生支持npm或者bower安装的模块。它还能给css、scss、less、coffeescript、es6、图片、html以及诸如jade、ejs的模板打包。
webpack 的优势
其优势主要可以归类为如下几个：
支持CommonJS、ES6、AMD、UMD等，(甚至是混合形式)方便旧项目进行代码迁移。
可以打包成一个完整的包，也可以分成多个部分，在运行时异步加载（可以减少初始加载时间）。
依赖在编译时即处理完毕，可以减少运行时包的大小。
Loaders可以使文件在编译时得到预处理，这可以帮我们做很多事情，比如说coffee转换成JavaScript，模板的预编译，图片的base64处理；
开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
扩展性强，高度模块化插件系统可以适应多变的需求。
官网
http://www.jianshu.com/p/f0df52969a5e
初始化
npm init
安装
npm install webpack -g
测试
webpack -V
本地安装
npm install –save webpack
npm install webpack –save-dev
示例
创建空目录Demo文件夹 文件夹中创建app空文件夹
在app文件夹中创建entry.js文件
文件内容如下
app>entry.js
document.write("It works.");
app>index.html
webpack入门
执行命令：
cd Demo/app
webpack ./entry.js bundle.js
该命令会对entry.js文件编译并创建一个bundle.js文件
如果成功的话，它会显示如下：
Hash: ca188ee5789bb780fcec
Version: webpack1.13.0
Time:65ms
Asset Size Chunks Chunk Names
bundle.js1.42kB0[emitted] main
[0] ./entry.js28bytes {0} [built]
在浏览器中打开index.html 显示 It works.
配置文件webpack.config.js
module.exports = {
context: __dirname +'/app',//上下文
entry:'./index.js',//入口文件
output: {//输出文件
path: __dirname +'/app',
filename:'./bundle.js'
},
module: {
loaders: [//加载器
{test:/\.html$/, loader:'raw'},
{test:/\.css$/, loader:'style!css'},
{test:/\.scss$/, loader:'style!css!sass'},
{test:/\.(png|jpg|ttf)$/, loader:'url?limit=8192'}
]
}
};
基础代码：
varwebpack =require("webpack");
varpath =require("path");
module.exports = {
entry:'./src/main.js',//入口文件,webpack会从入口文件出开始查找依赖递归进行打包
output: {
path: path.join(__dirname,'www'),//打包后的文件位置
filename:'js/bundle.js',//打包后的文件名
},
module: {
loaders: [//配置模块加载器,数组形式
{ test:/\.(js|jsx)$/, loaders: ['babel?presets[]=react,presets[]=es2015'] },//babel加载器用于将es6转化成es5,使用前请先安装babel-loader再引入加载器
],
}
};
网友评论