標籤：
首先現在的webpack教程已經很多了，寫這篇的原因是因為自己在從小白開始的搭建過程中，並沒有找到比較好的教程，花費了很多的時間，so 有了這篇部落格，方便小白同學學習。
node環境在這裡不在贅述，package.json檔案如下
{ "name": "wn", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server --hot --inline" }, "author": "", "license": "ISC", "devDependencies": { "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.13.2", "babel-preset-react": "^6.11.1", "css-loader": "^0.23.1", "node-sass": "^3.8.0", "react": "^15.3.0", "react-dom": "^15.3.0", "sass-loader": "^4.0.0", "style-loader": "^0.13.1", "stylus": "^0.54.5", "stylus-loader": "^2.1.1", "url-loader": "^0.5.7", "webpack": "^1.13.1", "webpack-dev-server": "^1.14.1" }}
這裡面有個坑，就是babel-preset-react這個外掛程式，babel-loader中es2015這個外掛程式是解析es6文法的，babel-preset-react這個外掛程式是解析react文法的，在mac中這個外掛程式整合在了es2015中，但是window中並沒有整合，導致編譯失敗，這點大家注意。
拿到這個檔案，直接命令列npm install安裝完畢。ps："start": "webpack-dev-server --hot --inline"這項配置是輸入npm start時執行的指令，這裡會啟動localhost:8080介面，在這個頁面會儲存後自動重新整理。
接下來是webpack.config.js檔案，這裡面的注釋我寫的還算多，不在解釋。
這裡有官網的loader列表，大家可以自行添加使用http://webpack.github.io/docs/list-of-loaders.html
module.exports = { //在log中定位源檔案位置，跟sass的sourcemap一樣 devtool: ‘source-map‘, //webpack-dev-server配置 devServer: { historyApiFallback: true, hot: true, inline: true, progress: true, }, //頁面入口檔案配置 entry: ‘page/index.js‘, //入口檔案輸出配置 output: { filename: ‘bundle.js‘ }, module: { //載入器配置，這些loader會解析不同格式的檔案，然後一起打包成js檔案 loaders: [ { test: /\.css$/, loader: ‘style-loader!css-loader‘ }, { test: /\.scss$/, loader: ‘style!css!sass?sourceMap‘}, { test: /\.styl$/, loader: ‘style-loader!css-loader!stylus-loader‘}, { test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192‘}, { test: /\.js$/, loader: "babel-loader", query: {presets: [‘es2015‘,‘react‘]}} ] }, //其它解決方案配置 resolve: { //自動擴充檔案尾碼名，意味著我們require模組可以省略不寫尾碼名 extensions: [‘‘, ‘.js‘, ‘.json‘, ‘.scss‘, ‘.styl‘], }};
下面是首頁index.html
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Hello World app</title> </head> <body> <div id=‘app‘></div> </body> <script type="text/javascript" src=‘bundle.js‘></script></html>
index.js檔案
import React from ‘react‘import ReactDOM from ‘react-dom‘ReactDOM.render( <div>hello world</div>, document.getElementById(‘app‘))
檔案目錄
在根目錄執行npm start後，開啟瀏覽器http://localhost:8080，每次修改檔案後頁面都會自動重新整理，這個打包在記憶體中，不會產生打包後扥檔案。
bundle檔案在執行webpack命令後會打包出來。
下一篇會加上react-router和redux等更進階的庫，再見！
webpack，react，babel
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
