導讀：React作爲近年來大紅大紫的view層框架，以其高效、靈活性、強大的社區環境而受到廣泛關注。但react也不是直接就能拿來使用的，它必須通過配置相應環境才能更好的開發項目。雖然你可以使用官方推薦的構建React環境方式Create React App ，但有時候也想知道到底它是怎麼配置的，所以自己動手搭建React環境也是很必要的學習過程。本系列分爲5章，翻譯自codecademy關於React搭建的教程。本篇原文地址：React Setup, Part III: Webpack。
Background
You’ve installed Babel, but you haven’t “plugged it in” to your React app yet. You need to set up a system in which your React app will automatically run through Babel and compile your JSX, before reaching the browser.
你已經裝好了Babel，但你還沒有把它加到你的React app中。你需要配置一種系統使得React app在到達瀏覽器前，能自動利用Babel編譯JSX。
Also, JSX to JavaScript is just one of many transformations that will need to happen to your React code. You need to set up a “transformation manager” that will take your code and run it through all of the transformations that you need, in the right order. How do you make that happen?
從JSX到JavaScript的轉換也是React代碼需要發生的衆多轉換之一。你需要建立一種“轉換管理”系統以使你的代碼能以正確的順序運行你所需要的所有轉換。那要怎麼做哪？
There are a lot of different software packages that can make this happen. The most popular as of this writing is a program called webpack.
有很多種不同的軟件包可以做到。其中最流行的程序叫做webpack。
Install webpack
webpack is a module that can be installed with npm, just like react and react-dom. You’ll also be installing two webpack-related modules named webpack-dev-server and html-webpack-plugin, respectively. We’ll explain these a little more soon.
webpack模塊可通過npm安裝，就像react和react-dom那樣。你也要裝兩個與webpack有關聯的模塊：webpack-dev-server和html-webpack-plugin。
webpack should be saved in development mode, just like babel.
Install webpack, webpack-dev-server, and html-webpack-plugin with one of these two terminal commands:
webpack應該像babel一樣以開發模式保存（在package.json文件中）。你可以在終端輸入下面任一命令來安裝webpack, webpack-dev-server, 和 html-webpack-plugin。
webpack.config.js
Alright! Webpack has been installed!
Webpack’s job is to run your React code through various transformations. Webpack needs to know exactly what transformations it should use!
好了，Webpack已經裝好了。Webpack的工作就是使你的React代碼完成各種各樣的轉換。Webpack需要確切知道應使用哪種轉換。
You can set that information by making a special webpack configuration file. This file must be located in the outermost layer of your root directory, and must be named webpack.config.js. It is where you will put all of the details required to make webpack operate.
In your root directory, create a new file named webpack.config.js.
你要創建一個特殊的webpack配置文件來設置那些信息。這個文件必須位於你根目錄最外層，也必須要叫做webpack.config.js。該文件就是放置使webpack運行所需詳細細節的地方。在你的根目錄下，創建這樣一個叫做webpack.config.js的新文件。
Configure webpack
Webpack is going to take your JavaScript, run it through some transformations, and create a new, transformed JavaScript file. This file will be the ones that the browser actually reads.
Wepack將會使你的JavaScript文件完成一些轉變，然後創建一個新的轉變好的JavaScript文件。瀏覽器事實上也將讀取該文件。
In order to do this, Webpack needs to know three things:
- What JavaScript file it should transform.
- Which transformations it should use on that file.
- Where the new, transformed file should go.
Let’s walk through those three steps!
爲了完成這個目的，Webpack需要知道以下三種東西：
- 轉變應該發生在哪個JavaScript文件
- 應該應用那種轉變
- 轉變後的新文件應該放在哪裏
下面就讓我們進行這三個步驟吧。
First, in webpack.config.js, write:
首先，在webpack.config.js寫下以下代碼：
All of webpack’s configuration will go inside of that object literal!.
webpack的所有配置信息將會寫在該字面量對象中。
What JavaScript File Should Webpack Transform?
The first thing that webpack needs to know is an entry point. The entry point is the file that Webpack will transform.
webpack需要知道的第一件事是 entry point（入口）。入口指的是webpack將實施轉換的那個文件。
Your entry point should be the outermost component class of your React project. It might look something like this:
你的入口文件應該是在你React項目中最外圍的組件類。它看起來可能像這樣：
In this example, webpack will transform the result of <App />. If <App />’s render function contains components from other files, then those components will be transformed as well. If you make your entry point the outermost component class of your app, then webpack will transform your entire app!
在本例中，wepack將轉變<App />的結果。如果<App />的render方法包含來自其他文件的組件，那麼哪些組件同樣會得到轉變。如果你使entry point爲app的最外圍組件類，那麼webpack將使整個app得到轉變。
To specify an entry point, give module.exports a property named entry. entry’s value can be a filepath, or an array of filepaths if you would like to have more than one entry point. For this project, you will only need one.
給module.exports一個entry的屬性名 就可以指定entry point。entry的值可以是一個文件路徑，如果你想要不止一個入口，還可以設置爲文件路徑數組。針對本項目，你只需要一個。
In webpack.config.js, update module.exports to look like this:
在webpack.config.js中，像下面這樣更新module.exports：
In Node.js, __dirname refers to the currently executing file. __dirname+/app/index.js will create a filepath pointing to the currently executing file, down into a folder named app, and landing on a file named index.js.
在Node.js中，__dirname指向當前可執行文件。__dirname+/app/index.js會建立一個指向從當前可執行文件所在位置出發，在app目錄下index.js文件的路徑。
What Transformations Should Webpack Perform?
Webpack can now successfully grab your outermost component class file, and therefore grab your entire React app. Now that webpack can grab all of this code, you need to explain what webpack should do with it once it’s been grabbed.
webpack會成功找到你的最外圍類文件，並取得整個React app。既然webpack可以找到所有代碼，那接下來你就需要告訴webpack一旦找到後應該怎麼處理了。
You can tell webpack what to do with the code that it’s grabbed by adding a second property to module.exports. This property should have a name of module and a value of an object literal containing a loaders array:
你要在module.exports添加第二個屬性來告訴webapck怎麼處理找到的代碼。這個屬性叫module，它是一個字面量對象，它的值包含一個loaders數組：
Each “loader” that you add to the loaders array will represent a transformation that your code will go through before reaching the browser.
你向loaders數組中添加的每個“loader”，都代表着在到達瀏覽器前，代碼做的一種轉變。
Write a Loader
Each loader transformation should be written as an object literal. Here’s your first loader, empty for now:
每個要進行的loader轉變都要寫成對象字面量的形式。下面是第一個loader，它現在還是空的：
Each loader object needs a property called test. The test property specifies which files will be affected by the loader:
每個loader對象需要一個叫做test的屬性。這個屬性指定將被該loader影響的文件。
The regular expression/\.js$/ represents all strings that end with the pattern, “.js”. That means that this loader will perform a transformation on all “.js” files.
正則表達式/\.js$/代表所有以“.js”結尾的字符串。它意味着該loader將轉換所有的“.js”文件。
In addition to “test”, each loader transformation can have a property named include or exclude. You can use “exclude” to specify files that match the “test” criteria, that you don’t want to be transformed. Similarly you can use “include” to specify files that don’t fit the “test” criteria, that you do want to be transformed:
除了“test”，每個loader轉換還有一個叫做include或exclude的屬性。“exclude”用來指定那些滿足“test”規則，但你不想轉變的那些文件。同樣“include”用來指定哪些不符合“test”規則但你確實想要轉變的那些文件：
The node_modules folder contains lots of JavaScript files that will be caught by your /\.js$/ test. However, you don’t want anything in the node_modules folder to be transformed. node_modules holds the code for React itself, along with the other modules that you’ve downloaded. You don’t want to transform that!
node_modules 文件夾包含很多可被/\.js$/ 匹配的JavaScript文件，然而你不想轉變該目錄的文件。node_modules包含React本身的代碼還有其他下載的模塊。你不應該轉變他們。
The final property of each loader is what transformation that loader should perform! You specify a particular transformation with a property named loader:
每個loader的最後一個屬性是loader應該實施的轉換。你要用lader屬性名指定一個轉變：
In this example, you have a loader with three properties: test, exclude, and loader. Your loader will search for all files ending in “.js”, excluding files in the node_modules folder. Whatever files it finds, it will run through the ‘babel-loader’ transformation.
在本例中，你創建了一個包含test、exclude、loader三個屬性的loader。該loader會搜索除node_modules文件夾外所有的.js文件。只要找到該類文件就會對其應用“babel-loader”轉變。
Where does the string ‘babel-loader’ come from? When you ran the command npm install --save-dev babel-core babel-loader babel-preset-react, you installed babel-loader into your node_modules folder. Your loader property will automatically be able to find it there. The magic of npm!
Add babel-loader to webpack.config.js.
‘babel-loader‘從哪來的呢？之前在你運行npm install --save-dev babel-core babel-loader babel-preset-react時就已經將babel-loader安裝進了node_modules文件夾。你的loader屬性就能自動發現它。不可思議的npm？
向webpack.config.js添加babel-loader。
What Should Webpack Do With The Transformed JavaScript?
Alright! Now you have told webpack which files to grab, and how to transform those files. Webpack will grab your React app and run it through babel-loader, translating all of your JSX into JavaScript.
好了！現在你已經告訴了webpack要抓取那些文件和怎進行轉換。webpack會抓取到你的React app，運行bable-loader，將JSX轉變爲JavaScript。
The final question is, where should the transformed JavaScript go?
Answer this by adding another property to module.exports. This property should have a name of output, and a value of an object:
最後的問題是，轉換好的JavaScript文件應該放在哪裏？可通過在module.exports添加另一個屬性來回答這個問題。該屬性叫做output，它的值是一個對象；
The output object should have two properties: filename and path. filename will be the name of the new, transformed JavaScript file. path will be the filepath to where that transformed JavaScript file ends up:
這個output對象有兩個屬性：filename和path。filename是新創建的轉變好的JavaScript文件的名字。path屬性是該轉換完成的JavaScript文件的放置路徑：
This will save your transformed JavaScript into a new file named build/transformed.js.
這會將轉變好的JavaScript文件保存到build/transformed.js中。
Whenever you’re ready, continue to our next article!
準備好之後，讓我們開始下一節！