webpack介紹
Webpack是當下最熱門的前端資源模塊化管理和打包工具，它可以將很多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源，還可以將按需加載的模塊進行代碼分割，等到實際需要的時候再異步加載。
webpack和Grunt以及Gulp相比有什么特性
Gulp/Grunt是一種能夠優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優點使得Webpack可以替代Gulp/Grunt類的工具。
Grunt和Gulp的工作方式是：在一個配置文件中，指明對某些文件進行類似編譯、組合、壓縮等任務的具體步驟。
webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最后打包為一個瀏覽器可識別的JavaScript文件。
二者進行比較，Webpack的處理速度更快更直接，能打包更多不同類型的文件。
開始使用webpack
Node.js是必備的工具，NPM的版本最好是3.x版本以上，NPM 3.x提供了更有效的包依賴管理。
webpack用npm安裝。
//全局安裝 npm install webpack -g //安裝到你的項目目錄 npm install webpack --save-dev
1.新建一個文件夾wkdemo，在該文件下 npm install webpack --save-dev
(看得出來應該先建一個package.json文件的(/ □ \)）
2.package.json文件准備，可以使用npm init命令自動創建這個package.json文件
{ "name": "webpack-demo", "version": "1.0.0", "description": "webpack demo", "main": "app.js", "scripts": { "start": "webpack", "build": "webpack --progress --colors" }, "repository": { "type": "git", "url": ".." }, "keywords": [ "react", "webpack" ], "author": "wangjuan", "devDependencies": { "babel-core": "^5.8.25", "babel-loader": "^5.3.2", "css-loader": "^0.12.1", }, "dependencies": { }, "license": "ISC" }
3.webpack.config.js文件准備
var webpack = require('webpack'); module.exports = { //頁面入口文件配置 entry: [ // 'webpack/hot/only-dev-server', "./js/app.js" ], //入口文件輸出配置 output: { path: './build', filename: "bundle.js" }, module: { //加載器配置 loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.scss$/, loader: 'style!css!sass?sourceMap'}, { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} ] }, //插件項 plugins: [ new webpack.NoErrorsPlugin() ] };
4.index.html最基礎的html代碼，它唯一的目的就是加載打包后的js文件（bundle.js），注意路徑對應起來
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>New webpack app</title> </head> <body> <div id='root'></div> <script src="build/bundle.js"></script> </body> </html>
由webpack.config.js文件中：
//頁面入口文件配置 entry: [ // 'webpack/hot/only-dev-server', "./js/app.js" ],
可以看出需要建一個文件js/app.js作為入口文件。
5.入口文件app.js准備
//app.js var greeter = require('./hello.js'); document.getElementById('root').appendChild(greeter());
可以看到這里引用一個同目錄下hello.js文件
6.hello.js文件准備
// hello.js module.exports = function() { var greet = document.createElement('div'); greet.textContent = "Hi there and greetings! hello world12345"; return greet; };
7.執行webpack
8.運行index.html
最后看下目錄結構為：
參考：
http://www.cnblogs.com/skylar/p/React-Webpack-ES6.html
http://www.cnblogs.com/vajoy/p/4650467.html