摘要：安裝要開(kāi)始使用在項(xiàng)目中進(jìn)行開(kāi)發(fā)前我們首先需要在全局環(huán)境中進(jìn)行安裝。使用它可以將的語(yǔ)法轉(zhuǎn)換為的語(yǔ)法，以便在現(xiàn)在有的環(huán)境執(zhí)行。，是一段正則，表示進(jìn)行匹配的資源類(lèi)型。為指定應(yīng)該被忽略的文件，我們?cè)谶@兒指定了。

構(gòu)建應(yīng)用前我們先來(lái)了解一下Webpack, Webpack是一個(gè)模塊打包工具，能夠把各種文件（例如：ReactJS、Babel、Coffeescript、Less/Sass等）作為模塊進(jìn)行編譯后進(jìn)行打包。

要開(kāi)始使用Webpack在項(xiàng)目中進(jìn)行開(kāi)發(fā)前我們首先需要在全局環(huán)境中進(jìn)行安裝。

npm install webpack -g

安裝好后創(chuàng)建一個(gè)名叫learn-webpack的項(xiàng)目并進(jìn)入該項(xiàng)目文件夾，當(dāng)然項(xiàng)目名字你可以起你自己想要的名字。

mkdir learn-webpack && cd learn-webpack

通過(guò)編輯器找到你剛剛所創(chuàng)建的項(xiàng)目文件夾

現(xiàn)在我們來(lái)創(chuàng)建2個(gè)文件:

app.js

document.querySelector("#app").innerHTML = "Hello World!";

index.html

然后在終端執(zhí)行

webpack ./app.js ./dist/bundle.js

最后執(zhí)行啟動(dòng)本地的http服務(wù)

python -m SimpleHTTPServer

這個(gè)時(shí)候你就可以在瀏覽器輸入:

http://localhost:8000

如果你能在瀏覽器里面看到Hello world!那說(shuō)明你已經(jīng)成功的利用Webpack把main.js打包并編譯到了bundle.js.是不是很簡(jiǎn)單？

上面的只是對(duì)Webpack的使用進(jìn)行了一些簡(jiǎn)單的介紹，實(shí)際上每個(gè)項(xiàng)目下都應(yīng)該包含一個(gè)webpack.config.js，用來(lái)告訴Webpack需要做些什么。

module.exports = {
  entry: "app.js",
  output: {
    path: __dirname+"/dist",
    filename: "bundle.js"
  }
}

現(xiàn)在在終端中運(yùn)行：

webpack

看看是不是和之前輸入 webpack ./app.js ./dist/bundle.js 的打包編譯結(jié)果一樣。

entry：指定打包的入口文件

1.單個(gè)文件打包為單個(gè)輸出文件，直接寫(xiě)該文件的名字，例如：entry:"main.js"

2.多個(gè)文件打包為單個(gè)輸出文件，將文件名放進(jìn)一個(gè)數(shù)組，例如：entry:["main.js","xx.js"]

3.多個(gè)文件打包為多個(gè)輸出文件，將文件名放入一個(gè)鍵字對(duì)，例如：entry: {a:"main.js",b:"xx.js"}

output：配置打包結(jié)果

path為定義輸出文件夾，filename為打包結(jié)果文件的名稱(chēng)，如果指定打包入口文件為上面的1、2種情況，filename里面直接跟你想輸出的文件名。若為第3種情況filename里面需寫(xiě)成[name].文件名.js，filename里面的[name]為entry中的鍵。

當(dāng)我們?cè)诓煌５膶?duì)代碼進(jìn)行變動(dòng)的時(shí)候，為了不修改一次然后又手動(dòng)去進(jìn)行打包一次。可以使用webpack的watch功能。

webpack --watch 或者 webpack -w

或者可以直接在配置代碼里面把watch設(shè)置為true

module.exports = {
  entry: "app.js",
  output: {
    path: __dirname+"/dist",
    filename: "bundle.js"
  },
  watch: true
}

Babel是什么？Babel 是一個(gè) JavaScript 編譯器。使用它可以將ES6的語(yǔ)法轉(zhuǎn)換為ES5的語(yǔ)法，以便在現(xiàn)在有的環(huán)境執(zhí)行。

在終端執(zhí)行:

npm install webpack babel-loader babel-core babel-preset-es2015 --save-dev

執(zhí)行安裝完成后需要將之前的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"]
  }
}

現(xiàn)在就能在文件里面以ES6的語(yǔ)法進(jìn)行代碼編寫(xiě)，我們來(lái)測(cè)試一下，在app.js加入:

var func = str => {
  console.log(str);
};
func("我現(xiàn)在在使用Babel!");

ES6支持用箭頭方式來(lái)定義函數(shù)，如果你能在控制臺(tái)看到“我現(xiàn)在在使用Babel!”的打印文字，說(shuō)明我們的Babel模塊安裝成功，可以開(kāi)始使用ES6進(jìn)行代碼編寫(xiě)了。

loaders項(xiàng)里面表示用來(lái)加載這種類(lèi)型的資源的loader，loader的使用可以參考 using loaders，更多的loader可以參考 list of loaders。

test，是一段正則，表示進(jìn)行匹配的資源類(lèi)型。

exclude為指定應(yīng)該被忽略的文件，我們?cè)谶@兒指定了/node_modules/。

query有2種寫(xiě)法，參見(jiàn)query-parameters, 一種是直接以字符串形式跟在loader名后：

loader: "babel-loader?presets[]=es2015

另一種如本文所示：

query: {
  presets: ["es2015"]
}

resolve.extensions 用于指明程序自動(dòng)補(bǔ)全識(shí)別哪些后綴,
注意一下, extensions 第一個(gè)是空字符串! 對(duì)應(yīng)不需要后綴的情況.

前面我們已經(jīng)對(duì)Webpack和Babel進(jìn)行了配置并做了一些介紹，基本的環(huán)境已經(jīng)搭建好了，現(xiàn)在我們開(kāi)始在使用React。

終端輸入以下代碼對(duì)react和react-dom進(jìn)行安裝

npm install react react-dom --save

Babel針對(duì)React的所有的預(yù)設(shè)插件

npm install babel-preset-react --save-dev

由于我們?cè)黾恿藃eact的預(yù)設(shè)插件，所以需要對(duì)webpack.config.js進(jìn)行修改。

將module -> loaders下面的query修改如下：

query: {
    presets: ["es2015","react"]
}

現(xiàn)在創(chuàng)建一個(gè)名為hello.js的文件

import React from "react";

class Hello extends React.Component{
  render() {
    return (
      

          Hello, World!
      
    )
  }
}

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("我現(xiàn)在在使用Babel!");
// document.querySelector("#app").innerHTML = "Hello World!";

ReactDOM.render(
  ,
  document.querySelector("#app")
);

如果你能在瀏覽器里面看到 "Hello, React!"，就說(shuō)明我們已經(jīng)將Webpack+Babel+React的環(huán)境搭建好了，接下來(lái)我們就可以此基礎(chǔ)上來(lái)進(jìn)行開(kāi)發(fā)了。

出處:https://xiaoqing.org/webpack-...