1.認識Webpack
構建應用前我們先來了解一下Webpack, Webpack是一個模塊打包工具，能夠把各種文件（例如：ReactJS、Babel、Coffeescript、Less/Sass等）作為模塊進行編譯后進行打包。
2.安裝Webpack
要開始使用Webpack在項目中進行開發前我們首先需要在全局環境中進行安裝。
npm install webpack -g
3.創建一個項目
安裝好后創建一個名叫learn-webpack的項目并進入該項目文件夾，當然項目名字你可以起你自己想要的名字。
mkdir learn-webpack && cd learn-webpack
通過編輯器找到你剛剛所創建的項目文件夾
現在我們來創建2個文件:
app.js
document.querySelector('#app').innerHTML = 'Hello World!';index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Learn-webpack</title></head><body> <div id="app"></div> <script src="dist/bundle.js"></script></body></html>
然后在終端執行
webpack ./app.js ./dist/bundle.js
最后執行啟動本地的http服務
python -m SimpleHTTPServer
這個時候你就可以在瀏覽器輸入:http://localhost:8000
如果你能在瀏覽器里面看到Hello world!那說明你已經成功的利用Webpack把main.js打包并編譯到了bundle.js.是不是很簡單？
定義一個配置文件
上面的只是對Webpack的使用進行了一些簡單的介紹，實際上每個項目下都應該包含一個webpack.config.js，用來告訴Webpack需要做些什么。
module.exports = { entry: "app.js", output: { path: __dirname+"/dist", filename: "bundle.js" }}現在在終端中運行：webpack
看看是不是和之前輸入 webpack ./app.js ./dist/bundle.js 的打包編譯結果一樣。
entry：指定打包的入口文件
1.單個文件打包為單個輸出文件，直接寫該文件的名字，例如：entry:"main.js"
2.多個文件打包為單個輸出文件，將文件名放進一個數組，例如：entry:['main.js','xx.js']
3.多個文件打包為多個輸出文件，將文件名放入一個鍵字對，例如：entry: {a:'main.js',b:'xx.js'}
output：配置打包結果
path為定義輸出文件夾，filename為打包結果文件的名稱，如果指定打包入口文件為上面的1、2種情況，filename里面直接跟你想輸出的文件名。若為第3種情況filename里面需寫成[name].文件名.js，filename里面的[name]為entry中的鍵。
監聽變化自動打包
當我們在不停的對代碼進行變動的時候，為了不修改一次然后又手動去進行打包一次。可以使用webpack的watch功能。
webpack --watch 或者 webpack -w
或者可以直接在配置代碼里面把watch設置為true
module.exports = { entry: "app.js", output: { path: __dirname+"/dist", filename: "bundle.js" }, watch: true}4.使用Babel
Babel是什么？Babel 是一個 JavaScript 編譯器。使用它可以將ES6的語法轉換為ES5的語法，以便在現在有的環境執行。
在終端執行:npm install webpack babel-loader babel-core babel-preset-es2015 --save-dev
執行安裝完成后需要將之前的webpack.config.js修改為:
module.exports = { entry: "./app.js", output: { path: __dirname+"/dist", filename: "bundle.js" }, module: { loaders: [ { test: //.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015'] } } ] }, resolve: { extensions: ['','.coffee','.js'] }}現在就能在文件里面以ES6的語法進行代碼編寫，我們來測試一下，在app.js加入:
var func = str => { console.log(str);};func('我現在在使用Babel!');ES6支持用箭頭方式來定義函數，如果你能在控制臺看到“我現在在使用Babel!”的打印文字，說明我們的Babel模塊安裝成功，可以開始使用ES6進行代碼編寫了。
loaders項里面表示用來加載這種類型的資源的loader。
test，是一段正則，表示進行匹配的資源類型。
exclude為指定應該被忽略的文件，我們在這兒指定了/node_modules/。
query有2種寫法, 一種是直接以字符串形式跟在loader名后：
loader: 'babel-loader?presets[]=es2015
另一種如本文所示：
query: { presets: ['es2015']}resolve.extensions 用于指明程序自動補全識別哪些后綴,
注意一下, extensions 第一個是空字符串! 對應不需要后綴的情況.
5.結合React
前面我們已經對Webpack和Babel進行了配置并做了一些介紹，基本的環境已經搭建好了，現在我們開始在使用React。
終端輸入以下代碼對react和react-dom進行安裝
npm install react react-dom --save
Babel針對React的所有的預設插件
npm install babel-preset-react --save-dev
由于我們增加了react的預設插件，所以需要對webpack.config.js進行修改。
將module -> loaders下面的query修改如下：
query: { presets: ['es2015','react']}現在創建一個名為hello.js的文件
import React from "react";class Hello extends React.Component{ render() { return ( <div> Hello, World! </div> ) }}export default Hello;然后將app.js里面的文件修改如下：
import React from "react";import ReactDOM from "react-dom";import Hello from "./hello";// var func = str => {// console.log(str);// };//// func('我現在在使用Babel!');// document.querySelector('#app').innerHTML = 'Hello World!';ReactDOM.render( <Hello />, document.querySelector('#app'));如果你能在瀏覽器里面看到 "Hello, React!"，就說明我們已經將Webpack+Babel+React的環境搭建好了，接下來我們就可以此基礎上來進行開發了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
