Webpack+React入门

本教程的目的是为使用 Webpack 捆绑的 React 应用程序设置开发环境。虽然 Webpack 和其他打包程序的优点不断比较，但本教程将让您开始使用 Webpack 并帮助您自己做出决定。

依赖项

如果您还没有它们，则需要安装 node 和 npm。这两个工具将允许我们通过 package.json 管理我们的依赖关系。在根项目文件夹中，运行 npm init 并回答设置问题以设置 package.json（默认答案应该适用于大多数用户）。

此外，我们还需要用于 React 和 Webpack 的节点库以及用于转译的库。这可以在根文件夹中使用一串命令来完成：

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

文件结构

Webpack 从 entry 点开始工作。从这里开始，Webpack 通过查看 import 和 require 语句为程序运行所需包含的模块构建应用程序的依赖关系图。对我们来说，index.js 将是那个入口点。制作一个 dev 文件夹作为保存 index.js 的地方，我们将在其中进行更改。我们还需要一个 src 文件夹供 webpack 将包输出到。

mkdir dev src && touch dev/index.js

现在我们可以用演示代码填充index.js：

索引.js

var React = require('react');
var ReactDOM = require('react-dom');
var createReactClass = require('create-react-class');

var Index = createReactClass({
  render: function() {
    return (
      <div>
        <p>Webpack and React!</p>
      </div>
    );
  }
});
ReactDOM.render(<Index />, document.getElementById('app'));

索引.html

在我们继续 Webpacking 之前，我们需要加载我们的包的实际位置。这发生在index.html应该在根目录下，代码如下：

索引.html

<html>
  <head>
    <meta charset="utf-8">
    <title>React and Webpack</title>
  </head>
  <body>
    <div id="app" />
    <script src="src/bundle.js" type="text/javascript"></script>
  </body>
</html>

文件结构现在应该如下所示：

.
├── dev
│   └── index.js
├── index.html
├── package.json
└── src

webpack.config.js

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

webpack.config.js

var webpack = require("webpack");
var path = require("path");

var DEV = path.resolve(__dirname, "dev");
var OUTPUT = path.resolve(__dirname, "src");

var config = {
  entry: {
    Index : DEV + "/index.js"
  },

  output: {
    path: OUTPUT,
    filename: "bundle.js",
  },


  module: {
    loaders: [{
      include: DEV,
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "babel-loader",
      query: {
        presets: ['es2015', 'react']
      }
    },
    ]
  }

};

module.exports = config;

entry 告诉 Webpack 从哪里开始， loaders 告诉 Webpack 如何处理该文件扩展名以及如何处理它， output 指示在何处以及如何编写捆。

包装

现在我们已经准备好了一切，我们应该能够看到我们的应用程序正在运行。运行 ./node_modules/.bin/webpack --watch，几秒钟后你应该会看到如下内容：

➜  demo ./node_modules/.bin/webpack --watch   

Webpack is watching the files…

Hash: 1594ffb6ae2044c83abe
Version: webpack 3.7.1
Time: 1477ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  863 kB       0  [emitted]  [big]  Index
  [15] ./dev/index.js 468 bytes {0} [built]
    + 33 hidden modules

--watch 选项为我们提供了保存刷新。当您进行更改并保存时，在浏览器中重新加载 index.html 将自动重新加载新的更改。

此外，为编译命令制作 alias 至少可以节省一些制表符补全： alias output="./node_modules/.bin/webpack"

另一个加载器示例

这是另一个加载程序，file-loader，可用于将带有图像扩展名的文件捆绑到名为 images 的文件夹中。您可以在此处阅读有关 loaders 及其配置的更多信息

...
 module: {
    loaders: [{
      include: DEV,
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "babel-loader",
      query: {
        presets: ['es2015', 'react']
      }
    },
    {
      test: /\.(jpe?g|png|gif)$/i,
      loader:"file-loader",
      query:{
        name:'[name].[ext]',
        outputPath:'images/'
      }
    }
    ]
  }
...