如何设置基本的 webpack，反应和 babel 环境

这个构建管道并不完全是你所谓的生产就绪，但它确实为你提供了一个可靠的开始，你可以添加你需要的东西，以获得你正在寻找的开发体验。有些人采取的方法（有时包括我自己）是采用 Yeoman.io 或其他地方的完全构建的管道，然后剥去他们不想要的东西，直到它适合那种风格。这没有什么不妥，但也许通过上面的例子，你可以选择相反的方法并从裸骨中建立起来。

你可能想要添加的一些内容包括测试框架和覆盖统计信息，如 Karma with Mocha 或 Jasmine。与 ESLint 合作。在 webpack-dev-server 中更换热模块，以便获得 Ctrl + S，F5 开发体验。此外，当前管道仅在开发模式下构建，因此生产构建任务将很好。

注意！

请注意，在 webpack.config.js 的 context 属性中，我们使用节点路径模块来定义路径，而不是仅将 __dirname 连接到字符串/src，这是因为 windows 讨厌正斜杠 。因此，要使解决方案更具跨平台兼容性，请使用杠杆节点来帮助我们。

webpack.config.js 属性的说明

上下文

这是 webpack 将用作解析相对文件路径的根路径的文件路径。所以在 index.jsx 中我们使用 require('./index.html')，dot 实际上解析为 src/目录，因为我们已经在这个属性中定义了它。

条目

webpack 首先开始绑定解决方案。这就是为什么你会在 index.jsx 中看到我们将需求和导入的解决方案拼接在一起的原因。

输出

这是我们定义 webpack 应该删除它发现绑定的文件的位置。我们还为文件定义了一个名称，我们将在其中删除绑定的 javascript 和样式。

devServer

这些是特定于 webpack-dev-server 的设置。contentBase 定义了服务器应该将其作为根的位置，我们在这里定义了 dist/文件夹作为我们的基础。port 是服务器将托管在其上的端口。open 用于指示 webpack-dev-server 在你启动服务器后为你打开默认浏览器。

模块>装载机

这定义了 webpack 使用的映射，以便在找到不同的文件时知道该怎么做。test 属性为 webpack 提供正则表达式，用于确定是否应该应用此模块，在大多数情况下，我们匹配文件扩展名。loader 或 loaders 给出了我们想要用来将文件加载到 webpack 中的加载器模块的名称，并让该加载器负责该文件类型的绑定。javascript 上还有一个 query 属性，这只是为加载器提供了一个查询字符串，所以如果我们想要的话，我们可能也会在 html 加载器上使用查询属性。这只是一种不同的做事方式。