Webpack + React 入门

本教程的目的是为使用 Webpack 组合的 React 应用程序建立一个开发环境.虽然 Webpack 和其他组合的优点不断比较,但本教程将允许您开始使用 Webpack 并帮助您自行决定。

依赖性

如果你没有它们,你需要安装 node和 npm。这两个工具将使我们能够通过package.json来管理我们的依赖性。在 root 项目文件夹中,运行npm init并回答设置问题来设置package.json(默认答案应该适用于大多数用户)。

此外,我们还需要 React 和 Webpack 的节点库以及用于转录的库。

npm install --save react-dom create-react-class webpack
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

文件结构

Webpack 通过从 entry 点开始工作. 从这里开始,Webpack 会通过查看进口和要求 陈述来构建应用程序中需要包含的模块的依赖图表。对于我们来说,index.js 将是该入口点。创建一个dev 文件夹作为一个存储index.js的地方,在那里我们将进行更改。我们还需要一个src 文件夹来输出 Webpack 包。

1mkdir dev src && touch dev/index.js

现在我们可以用演示代码填写index.js:

 1[label Index.js]
 2var React = require('react');
 3var ReactDOM = require('react-dom');
 4var createReactClass = require('create-react-class');
 5
 6var Index = createReactClass({
 7  render: function() {
 8    return (
 9      <div>
10        <p>Webpack and React!</p>
11      </div>
12    );
13  }
14});
15ReactDOM.render(<Index />, document.getElementById('app'));

标签:HTML

在我们继续Webpacking之前,我们需要实际地点,我们的包将被加载. 这发生在index.html中,应该在根目录中进行,代码如下:

 1[label index.html]
 2<html>
 3  <head>
 4    <meta charset="utf-8">
 5    <title>React and Webpack</title>
 6  </head>
 7  <body>
 8    <div id="app" />
 9    <script src="src/bundle.js" type="text/javascript"></script>
10  </body>
11</html>

现在的文件结构应该是这样的:

1.
2├── dev
3│   └── index.js
4├── index.html
5├── package.json
6└── src

Webpack.config.js 的使用

现在要设置webpack.config.js文件,这是输出可用包所需的所有信息。

 1[label webpack.config.js]
 2var webpack = require("webpack");
 3var path = require("path");
 4
 5var DEV = path.resolve(__dirname, "dev");
 6var OUTPUT = path.resolve(__dirname, "src");
 7
 8var config = {
 9  entry: {
10    Index : DEV + "/index.js"
11  },
12
13  output: {
14    path: OUTPUT,
15    filename: "bundle.js",
16  },
17
18  module: {
19    loaders: [{
20      include: DEV,
21      test: /\.js$/,
22      exclude: /node_modules/,
23      loader: "babel-loader",
24      query: {
25        presets: ['es2015', 'react']
26      }
27    },
28    ]
29  }
30
31};
32
33module.exports = config;

「入口」告訴 Webpack 從哪裡開始,「載入器」告訴 Webpack 如何處理該檔案擴張和該做什麼,而「輸出」則告訴 Webpack 如何寫包。

包装

现在我们已经有了所有东西,我们应该能够看到我们的应用程序在行动中。运行 ./node_modules/.bin/webpack --watch 然后在几秒钟内你应该看到这样的东西:

 1➜  demo ./node_modules/.bin/webpack --watch   
 2
 3Webpack is watching the files…
 4
 5Hash: 1594ffb6ae2044c83abe
 6Version: webpack 3.7.1
 7Time: 1477ms
 8    Asset Size Chunks Chunk Names
 9bundle.js 863 kB 0  [emitted]  [big]  Index
10  [15] ./dev/index.js 468 bytes {0} [built]
11    + 33 hidden modules

「--watch」選項讓我們在保存中更新。當您進行更改並保存時,在您的瀏覽器中重新加載「index.html」會自動重新加載新的更改。

此外,为编译命令创建一个代名词至少保存了几个标签完成: `alias output="./node_modules/.bin/webpack"

另一个载体例子

这里还有另一个加载器,‘file-loader’,可以用来将带有图像扩展的文件合并到名为‘images’的文件夹中。

 1...
 2 module: {
 3    loaders: [{
 4      include: DEV,
 5      test: /\.js$/,
 6      exclude: /node_modules/,
 7      loader: "babel-loader",
 8      query: {
 9        presets: ['es2015', 'react']
10      }
11    },
12    {
13      test: /\.(jpe?g|png|gif)$/i,
14      loader:"file-loader",
15      query:{
16        name:'[name].[ext]',
17        outputPath:'images/'
18      }
19    }
20    ]
21  }
22...