自己动手搭建React开发环境之三Webpack

导读：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:

1. What JavaScript file it should transform.
2. Which transformations it should use on that file.
3. Where the new, transformed file should go.
   Let’s walk through those three steps!

为了完成这个目的，Webpack需要知道以下三种东西：

1. 转变应该发生在哪个JavaScript文件
2. 应该应用那种转变
3. 转变后的新文件应该放在哪里

下面就让我们进行这三个步骤吧。

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!

准备好之后，让我们开始下一节！