Webpack是當下最熱門的前端資源模塊化管理和打包工具,它能夠將不少鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源,還能夠將按需加載的模塊進行代碼分割,等到實際須要的時候再異步加載。css
Gulp/Grunt是一種可以優化前端的開發流程的工具,而WebPack是一種模塊化的解決方案,不過Webpack的優勢使得Webpack能夠替代Gulp/Grunt類的工具。html
Grunt和Gulp的工做方式是:在一個配置文件中,指明對某些文件進行相似編譯、組合、壓縮等任務的具體步驟。前端
webpack的工做方式是:把你的項目當作一個總體,經過一個給定的主文件(如:index.js),Webpack將從這個文件開始找到你的項目的全部依賴文件,使用loaders處理它們,最後打包爲一個瀏覽器可識別的JavaScript文件。react
兩者進行比較,Webpack的處理速度更快更直接,能打包更多不一樣類型的文件。webpack
Node.js是必備的工具,NPM的版本最好是3.x版本以上,NPM 3.x提供了更有效的包依賴管理。git
webpack用npm安裝。web
//全局安裝 npm install webpack -g //安裝到你的項目目錄 npm install webpack --save-dev
1.新建一個文件夾wkdemo,在該文件下 npm install webpack --save-devnpm
(看得出來應該先建一個package.json文件的(/ □ \))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