在前端开发中，使用 npm 作为包管理工具来管理项目中所需要的依赖包已成为一种行业标准。而 meteor-webpack-client 则是一款专门用于在 meteor（一款全栈式 JavaScript 框架）中集成 webpack（一款优秀的前端打包工具）的 npm 包。本文将详细介绍如何使用 meteor-webpack-client。
安装
首先，我们需要在本地全局安装 meteor 和 webpack，具体操作如下：
$ npm install -g meteor webpack
接着，我们需要为我们的 meteor 应用项目添加 meteor-webpack-client：
$ meteor npm install --save meteor-webpack-client
配置
在安装了 meteor-webpack-client 后，我们需要在项目根目录下添加一个名为 webpack.config.js 的文件，并在文件中进行相应的 webpack 配置。
例如，下面的 webpack 配置将所有 js 文件都打包进一个名为 bundle.js 的文件中。
-- -------------------- ---- -------
-------------- - -
------ -------------------
------- -
----- -----------
--------- ------------
--
------- -
-------- -
-
----- --------
------- ---------------
--
--
--
--需要注意的是，由于 meteor 中使用的是 ES2015 的模块系统，而 webpack 会将模块转换为 CommonJS 的形式，因此我们需要在配置文件中添加以下代码：
var meteorExternals = require('meteor-webpack-client/lib/meteor-externals.js');
module.exports = {
// ...
externals: [meteorExternals()],
// ...
};这段代码将会将 meteor 的所有内置的模块排除在外，以使得所编写的代码能够正确地加载。
编写代码
在完成了配置后，我们就可以愉快地编写我们的代码了！需要注意的是，由于我们使用了 webpack 来打包我们的代码，在引用其他模块时，我们需要使用相应的 webpack 加载器进行加载。
例如，我们在 main.js 中需要引用一个名为 React 的模块，其代码如下：
import React from 'react';
import { render } from 'react-dom';
render(<h1>Hello, world!</h1>, document.getElementById('app'));在以上代码中，我们使用了 webpack 提供的 babel-loader 来进行代码转换，以使得 ES2015 的语法能够被正确地执行。
运行
在完成了以上的所有操作后，我们就可以愉快地将我们的应用程序部署到服务器上运行了。
$ meteor run
在运行后，我们可以在浏览器中访问 http://localhost:3000 来查看我们的应用程序。
总结
本文介绍了如何使用 meteor-webpack-client，包括安装、配置、编写代码和运行等步骤。运用 meteor-webpack-client 可以帮助我们更加方便地在 meteor 中使用 webpack，进而提高我们的代码开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f431d8e776d08040e6a