在前端开发中，webpack2 是一个广泛使用的构建工具，它能够将多个模块打包成一个模块，减少了前端开发中文件的下载次数，提高了页面加载速度。本文将为你介绍如何使用 npm 包 webpack2。
前置环境
在使用 webpack2 之前，你需要确保电脑上已经安装 Node.js。如果你还没有 Node.js，你可以在官网下载和安装。
安装 webpack2
运行以下命令可以在全局安装 webpack2：
npm install webpack -g
安装完成后，你可以在命令行中输入以下命令检查是否安装成功：
webpack -v
如果返回 webpack 版本号，则表示 webpack2 安装成功。
使用 webpack2
创建 webpack2 配置文件
在使用 webpack2 之前，你需要创建一个配置文件，该文件会告诉 webpack2 如何打包你的代码。在项目根目录下创建一个名为 webpack.config.js 的文件。
touch webpack.config.js
配置文件选项
下面我们来一步步配置 webpack.config.js 文件：
-- -------------------- ---- -------
-------------- - -
------ -----------------
------- -
----- --------- - --------
--------- -----------
--
------- -
------ --
----- --------
-------- ---------------
---- ----------------
--
--
---------- -
------------ --------
-
--这个配置文件告诉 webpack2 打包 ./src/index.js 文件，并把打包后的文件输出到 ./dist/bundle.js 文件中。同时我们使用 babel 来处理打包过程中的 JavaScript 代码，其中 devServer 选项用来启动一个开发服务器，方便我们进行开发和调试。
创建文件编译器
在我们配置文件中有一个 module 选项，它用来配置文件编译器。我们需要在项目中安装 babel-loader 来处理 JavaScript 代码。
npm install babel-core babel-loader babel-preset-env --save-dev
然后在配置文件中配置 babel-loader。
-- -------------------- ---- -------
-------------- - -
-- --- ---- ---
------- -
------ --
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- -------
-
-
--
--
-- --- ---- ---
--这个配置告诉 webpack2 将所有 test 属性为 .js 的文件用 babel-loader 编译器编译，并使用 env 预设模式进行编译。
打包代码
现在我们已经完成了配置文件，我们可以在项目根目录下执行以下命令打包代码：
webpack
如果一切顺利，你将会看到打包过程的输出信息，同时在 ./dist/bundle.js 文件中可以看到打包后的代码。现在我们可以把最终的 HTML 文件包含这个打包后的 JavaScript 文件，并在浏览器中运行。
使用 webpack-dev-server
webpack-dev-server 可以为我们提供一个简单的开发服务器，并支持自动刷新页面。我们可以在 package.json 文件中配置一个 "start" 命令来启动 webpack-dev-server：
{
"name": "my-app",
"version": "1.0.0",
"scripts": {
"start": "webpack-dev-server"
}
}现在我们可以使用以下命令启动开发服务器：
npm start
结语
以上就是使用 npm 包 webpack2 的一些详细教程和步骤。希望可以帮助你快速地入门 webpack2。祝你在前端开发中愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbc1db5cbfe1ea06119d9