序言：通過這個小例子你也許、大概、可能會掌握以下幾點
1、webstorm如何使用命令行
2、如何使用webpack的loaders把json格式的文件轉化為javascript文件
3、如何使用不同的loaders把es6轉換為瀏覽器可以識別的javascript文件
4、對於react而言如何使用合適的loaders把react的JSX文件轉換為javascript文件
5、webpack的服務器啟動后如何自動監聽改動的文件以及瀏覽器如何自動刷新。
准備：安裝好webstorm和nodejs
6、其他更加詳細參考：這里
一、開始：
1、新建一個demo04文件夾為項目根目錄，下面2個子文件夾分別是src和public
a:public目錄下一個index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webstorm+react+webpack</title> </head> <body> <div id="app"></div> <script src="bundle.js"></script> </body> </html>
b:src目錄下有
message.json代碼是：
{ "name":"Life", "do":"is a", "what":"gradient" }
createdom.js是為了獲取message.json的信息並創建dom，算是一個模塊，代碼如下
/** * Created by Administrator on 2016/11/12. */ var message=require('./message.json'); module.exports = function() { var greet=document.createElement('h1'); greet.innerHTML="<span>"+message.name+"</span>"+"<span>"+message.do+"</span>"+"<span>"+message.what+"</span>"; return greet; };
entry.js是webpack的入口文件：
/** * Created by Administrator on 2016/11/12. */ require('./style.css'); var createdom = require('./createdom.js'); document.getElementById('app').appendChild(createdom());
style.css代碼如下
body { min-height: 100%; overflow: hidden; background-color: #fff; /*background: rgba(37,38,33,.8);*/ font-family: Arial; } h1 { font-family: arial; display: inline-block; margin: 0 auto; font-weight: 900; text-transform: uppercase; text-align: center; font-size: 9vw; line-height: 120%; padding: 300px 0; -webkit-animation: background 20s linear infinite; animation: background 20s linear infinite; background: -webkit-linear-gradient(0deg, rgba(150,48,30,1) 0%,rgba(199,201,88,1) 10%,rgba(28,147,46,1) 20%,rgba(74,165,168,1) 30%,rgba(89,90,165,1) 40%,rgba(84,16,67,1) 50%,rgba(28,58,63,1) 60%,rgba(82,175,183,1) 70%,rgba(78,170,76,1) 80%,rgba(150,48,30,1) 90%,rgba(199,201,88,1) 100%); background: linear-gradient(90deg, rgba(150,48,30,1) 0%,rgba(199,201,88,1) 10%,rgba(28,147,46,1) 20%,rgba(74,165,168,1) 30%,rgba(89,90,165,1) 40%,rgba(84,16,67,1) 50%,rgba(28,58,63,1) 60%,rgba(82,175,183,1) 70%,rgba(78,170,76,1) 80%,rgba(150,48,30,1) 90%,rgba(199,201,88,1) 100%); background-size: 1000% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } span { display: block; } span:nth-child(1) { font-size: 214%; line-height: 85%; text-indent: -0.33em; } span:nth-child(2) { font-size: 292%; line-height: 69%; word-spacing: -0.2em; text-indent: -0.07em; } @-webkit-keyframes background { 0%{background-position:0% 50%} 100%{background-position:100% 50%} } @keyframes background { 0%{background-position:0% 50%} 100%{background-position:100% 50%} }
(注：html內引入的bundle.js是webpack最終編譯后自動生成的文件，暫時不必理會)
2、點擊webstorm左下角的 Terminal 按鈕彈出內置命令行，進入demo04根目錄，如下圖
輸入：cnpm int快速建立：package.json文件，該文件是描述項目的詳細信息。
3、分別幾個依賴包(上一篇提到過css-loader和style-loader)。
在已經完成:cnpm install webpack -g之后繼續下面
a:cnpm install --save-dev webpack
b:cnpm install --save-dev css-loader
c:cnpm install --save-dev style-loader
d:cnpm install --save-dev json-loader
json-loader是webpack把json文件編譯成javascript
e:cnpm install --save-dev webpack-dev-server
安裝webpack本地服務器依賴包，只要結合webpack.config.js配置好，你的瀏覽器會監測你的代碼修改並且自動刷新！
下面就來創建這個配置文件~~
4、在demo04根目錄創建webpack.config.js文件(webpack的默認的配置文件)，並輸入如下代碼：
/** * Created by Administrator on 2016/11/12 */ var webpack = require('webpack'); module.exports = { //2、進出口文件配置 entry:__dirname+'/src/entry.js',//指定的入口文件,“__dirname”是node.js中的一個全局變量，它指向當前執行腳本所在的目錄 output: {//輸出 path: __dirname+'/public',//輸出路徑 filename: 'bundle.js'//輸出文件名 }, module: {//在配置文件里添加JSON loader loaders: [ { test: /\.json$/, loader: "json" }, {//3、CSS-loader test:/\.css$/, loader:'style!css'//添加對樣式表的處理 } ] }, //4、服務器依賴包配置 devServer: { contentBase: "./public",//本地服務器所加載的頁面所在的目錄 colors: true,//終端中輸出結果為彩色 historyApiFallback: true,//不跳轉 inline: true//實時刷新 } }
5、如何啟動本地服務器？此時你的目錄結構應該是
繼續點擊Terminal進入demo04目錄輸入：webpack
再執行：webpack-dev-server啟動服務器
打開http://localhost:8080/。此時代碼變動webpack會自動編譯。瀏覽器會自動刷新，是不是有點神奇~
怎么到現在沒提到react？別急，我們繼續往下（http://localhost:8080/能正常打開沒有出錯的情況下）
二、繼續上面的例子，這次用react和react-dom、babel，要先安裝react和react-dom
demo04根目錄執行
a:cnpm install --save react
b:cnpm install --save react-dom
Babel其實是一個編譯JavaScript的平台，他可以幫你完成以下兩點：
1)：把下一代的javascript標准(es6/7)編譯為當前瀏覽器完全支持的javascript
2):使用基於JavaScript進行了拓展的語言，比如React的JSX
Babel其實是幾個模塊化的包，其核心功能位於稱為babel-core的npm包中，不過webpack把它們整合在一起使用，但是對於每一個你需要的功能或拓展，你都需要安裝單獨的包（用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包）。
繼續安裝：
c:cnpm install --save-dev babel-core
d:cnpm install --save-dev babel-loader
e:cnpm install --save-dev babel-preset-es2015
f:cnpm install --save-dev babel-preset-react
1、更新webpack.config.js代碼如下
/** * Created by Administrator on 2016/11/12 */ var webpack = require('webpack'); module.exports = { //2、進出口文件配置 entry:__dirname+'/src/entry.js',//指定的入口文件,“__dirname”是node.js中的一個全局變量，它指向當前執行腳本所在的目錄 output: {//輸出 path: __dirname+'/public',//輸出路徑 filename: 'bundle.js'//輸出文件名 }, module: {//在配置文件里添加JSON loader loaders: [ { test: /\.json$/, loader: "json" }, {//5、編譯es6配置 test:/\.js$/, exclude:/node_modules/, loader:'babel',//在webpack的module部分的loaders里進行配置即可 query:{ presets:['es2015','react'] } }, {//3、CSS-loader test:/\.css$/, loader:'style!css'//添加對樣式表的處理 } ] }, //4、服務器依賴包配置 devServer: { contentBase: "./public",//本地服務器所加載的頁面所在的目錄 colors: true,//終端中輸出結果為彩色 historyApiFallback: true,//不跳轉 inline: true//實時刷新 } }
現在你的webpack的配置已經允許你使用ES6以及JSX的語法了
2、使用es6更新createdom.js，返回一個react組件
/** * Created by Administrator on 2016/11/12. */ //var message=require('./message.json'); //module.exports = function() { // var greet=document.createElement('h1'); // greet.innerHTML="<span>"+message.name+"</span>"+"<span>"+message.do+"</span>"+"<span>"+message.what+"</span>"; // return greet; //}; //5、--------編譯es6配置后跟新greeter.js如下-------------- import React,{Component} from 'react'; import config from './message.json'; class Greeter extends Component{ render(){ return( <div> <h1> <span>{config.name}</span> <span>{config.do}</span> <span>{config.what}</span> </h1> </div> ); } } export default Greeter
3、同樣更新入口文件entry.js，使用react定義和渲染上面的模塊
/** * Created by Administrator on 2016/11/12. */ //require('./style.css'); //var createdom=require('./createdom.js'); //document.getElementById('app').appendChild(createdom()); //5、編譯es6配置后跟新main.js如下 import React from 'react'; import {render} from 'react-dom'; import Greeter from './createdom'; import './style.css'; render(<Greeter />,document.getElementById('app'));
執行:webpack 同樣會在public下面創建一個bundle.js文件
執行：webpack-dev-server啟動服務器，打開http://localhost:8080/如下
簡單描述了如何使用webstorm和react以及webpack的一些簡單配置。
最終如果在產品階段的話，可能還需要對打包的文件進行額外的處理，比如說優化，壓縮，緩存以及分離CSS和JS等等....。