導讀：React作爲近年來大紅大紫的view層框架，以其高效、靈活性、強大的社區環境而受到廣泛關注。但react也不是直接就能拿來使用的，它必須通過配置相應環境才能更好的開發項目。雖然你可以使用官方推薦的構建React環境方式Create React App，但有時候也想知道到底它是怎麼配置的，所以自己動手搭建React環境也是很必要的學習過程。本系列分爲5章，翻譯自codecademy關於React搭建的教程。本篇原文地址：React Setup, Part IV: HTMLWebpackPlugin。
HTMLWebpackPlugin
Good work! The hardest part is over. There is, however, still one issue.
幹得好，最難的地方已經過去了。但仍然有一個問題。
Your app’s main HTML file is named app/index.html. Your app’s outermost JavaScript file, which is also your entry point for webpack, is named app/index.js. These two files are neighbors, both living in the app folder.
你的app的主HTML文件是app/index.html。你的app的最外層JavaScript文件同時也是webpack的入口是app/index.js。這兩個文件相鄰，都處於app文件夾下。
Before webpack performs its transformations, your entry file (app/index.js) and your HTML file (app/index.html) are located in the same directory. The HTML file contains a link to the entry file, looking something like this:<script src="./index.js"></script> .
在weback進行轉換前，你的入口文件（app/index.js）和HTML文件（app/index.html）都位於相同目錄下。HTML文件包含一個指向入口文件的鏈接，像這樣：<script src="./index.js"></script>。
After webpack performs its transformations, your new entry file will be located in build/transformed.js, and that link won’t work anymore!
在webpack執行轉換後，新入口文件處在build/transformed.js，（HTML文件的）那個鏈接就無效了。
When webpack makes a new JavaScript file, it needs to make a new HTML file as well. There is a tool for this, and you’ve already installed it: html-webpack-plugin.
在webpack產生新的JavaScript文件的同時，還需要產生一個新的HTML文件。有個工具能完成這個工作，你之前也已經安裝了，它就是html-webpack-plugin。
Configure HTMLWebpackPlugin
At the top of webpack.config.js, add this line of code:
在webpack.config.js文件的頂部，添加這行代碼：
When you call require('html-webpack-plugin'), the returned value is a constructor function. Most of the work of configuring HTMLWebpackPlugin should be done on an instance of that constructor function.
當調用require('html-webpack-plugin')時，會返回一個構造器函數。配置HTMLWebpackPlugin的大部分工作都會由該構造器函數的實例完成。
Add this new declaration, underneath the previous one:
在之前代碼的下面添加新聲明：
The HTMLWebpackPlugin Configuration Object
That empty configuration object is where you will tell HTMLWebpackPlugin what it needs to know.
你將把HTMLWebpackPlugin需要知道的事情，寫到那個空配置對象中。
The object’s first property should be named template. template’s value should be a filepath to the current HTML file, the one that you’re trying to copy and move:
該對象的第一個屬性應該叫做template。template的值應該是那個你要複製和移動的HTML文件的路徑：
The object’s second property should be named filename. filename’s value should be the name of the newly created HTML file. It’s fine to name it index.html. Since the new HTML file will be located in the build folder, there won’t be any naming conflicts:
該對象的第二個屬性叫filename。filename的值爲新創建的HTML文件名。可以叫做index.html。因爲該文件會位於build文件夾下，所以不會有命名衝突。
The object’s final property should be named inject. inject value should be be a string: either 'head' or 'body'.
該對象的最後一個屬性叫inject。inject的值是是一個字符串，取值要麼是'head'，要麼是'body'。
When HTMLWebpackPlugin creates a new HTML file, that new HTML file will contain a <script> tag linking to webpack’s new JavaScript file. This tag can appear in either the HTML file’s <head> or <body> . You choose which one via the inject property.
當HTMLWebpackPlugin創建一個新的HTML文件時，該文件包含一個鏈接向webpack新產生的JavaScript文件的<script>標籤。這個標籤要麼出現在HTML文件的<head>標籤，要麼出現在<body>標籤。出現在哪由inject屬性決定。
Here’s an full example:
下面是完整的例子：
The Plugins Property
You have fully configured your HTMLWebpackPlugin instance! Now all that’s left is to add that instance to module.exports.
你已經完全配置好了HTMLWebpackPlugin實例。現在要做的就是把它添加到module.exports中了。
You can do this by creating a new module.exports property named plugins. plugins value should be an array, containing your configured HTMLWebpackPlugin instance!
爲此，你需要在module.exports中創建一個新的屬性plugins，該屬性的值爲一個包含配置的HTMLWebpackPlugin實例的數組。
Find the plugins property at the bottom of module.exports:
找到module.exports下面的plugin屬性：
Whenever you’re ready, continue to our final article!
若你準備好了，那就開始下一節吧！