编译自：https://blog.madewithenvy.com/getting-started-with-webpack-2-ed2b86c68783#.oozfpppao
作者： Drew Powers
译者： OneNewLife
Webpack 2一旦文档完成[1]，就将结束 Beta 测试期。不过这并不意味着你现在不能开始使用第 2 版，前提是你知道怎么配置它。（LCTT 译注：Webpack 2.1 已经发布。）
Webpack 是什么
简单来说，Webpack 是一个 JavaScript 模块打包器。然而，自从它发布以来，它发展成为了你所有的前端代码的管理工具（或许是有意的，或许是社区的意愿）。
老式的任务运行器的方式：你的标记、样式和 JavaScript 是分离的。你必须分别管理它们每一个，并且你需要确保每一样都达到产品级
任务运行器，例如 Gulp，可以处理许多不同的预处理器和转换器，但是在所有的情景下，它都需要一个输入源并将其压缩到一个编译好的输出文件中。然而，它是在每个部分的基础上这样做的，而没有考虑到整个系统。这就造成了开发者的负担：找到任务运行器所不能处理的地方，并找到适当的方式将所有这些模块在生产环境中联合在一起。
Webpack 试图通过提出一个大胆的想法来减轻开发者的负担：如果有一部分开发过程可以自动处理依赖关系会怎样？如果我们可以简单地写代码，让构建过程最终只根据需求管理自己会怎样？
Webpack 的方式：如果 Webpack 了解依赖关系，它会仅**我们在生产环境中实际需要的部分
如果你过去几年一直参与 web 社区，你已经知道解决问题的首选方法：使用 JavaScript 来构建。而且 Webpack 尝试通过 JavaScript 传递依赖关系使得构建过程更加容易。不过这个设计真正的亮点不是简化代码管理部分，而是管理层由 100% 有效的 JavaScript 实现（具有 Nodejs 特性）。Webpack 能够让你编写有效的 JavaScript，更好更全面地了解系统。
换句话来说：你不需要为 Webpack 写代码。你只需要写项目代码。而且 Webpack 就会持续工作（当然需要一些配置）。
简而言之，如果你曾经遇到过以下任何一种情况：
载入有问题的依赖项 意外引入一些你不需要在生产中用上的 CSS 样式表和 JS 库，使项目膨胀 意外的两次载入（或三次）库 遇到作用域的问题 CSS 和 JavaScript 都会有 寻找一个让你在 JavaScript 中使用 Node/Bower 模块的构建系统，要么就得依靠一个令人发狂的后端配置才能正确地使用这些模块 -
需要优化
资产交付，但你担心会弄坏一些东西
等等……
那么你可以从 Webpack 中收益了。它通过让 JavaScript 轻松处理你的依赖关系和加载顺序，而不是通过开发者的大脑。最好的部分是，Webpack 甚至可以纯粹在服务器端运行，这意味着你还可以使用 Webpack 构建渐进增强式[2]网站。
第一步
我们将在本教程中使用Yarn[3]（运行命令brew install yarn） 代替npm，不过这完全取决于你的喜好，它们做同样的事情。在我们的项目文件夹中，我们将在终端窗口中运行以下代码，将 Webpack 2 添加到我们的全局软件包以及本地项目中：
yarn global add webpack@2.1.0-beta.25 webpack-dev-server@2.1.0-beta.9
yarn add --dev webpack@2.1.0-beta.25 webpack-dev-server@2.1.0-beta.9
我们接着会通过项目根目录的一个webpack.config.js文件来声明 webpack 的配置：
'use strict';
const webpack = require('webpack');
module.exports = {
context: __dirname '/src',
entry: {
app: './app.js',
},
output: {
path: __dirname '/dist',
filename: '[name].bundle.js',
},
};
注意：此处__dirname是指你的项目根目录
记住，Webpack “知道”你的项目发生了什么。它通过阅读你的代码来实现（别担心，它签署了保密协议 :D ）。Webpack 基本上执行以下操作：
从context文件夹开始…… ……它查找entry下的文件名…… ……并读取其内容。每一个import（ES6[4]）或require()（Nodejs）的依赖会在它解析代码的时候找到，它会在最终构建的时候打包这些依赖项。然后，它会搜索那些依赖项以及那些依赖项所依赖的依赖项，直到它到达“树”的最底端 只打包它所需要的，没有其它东西。 Webpack 从context文件夹打包所有东西到output.path文件夹，使用output.filename命名模板来为其命名（其中[name]被替换成来自entry的对象的键）。
所以如果我们的src/app.js文件看起来像这样（假设我们事先运行了yarn add --dev moment）：
'use strict';
import moment from 'moment';
var rightNow = moment().format('MMMM Do YYYY, h:mm:ss a');
console.log( rightNow );
// "October 23rd 2016, 9:30:24 pm"
我们应该运行：
webpack -p
注意：p标志表示“生产”模式，这会压缩输出文件。
它会输出一个dist/app.bundle.js，并将当前日期和时间打印到控制台。要注意 Webpack 会自动识别 上面的'moment'指代的是什么（比如说，虽然如果你有一个moment.js文件在你的目录，默认情况下 Webpack 会优先考虑你的momentNode 模块）。
使用多个文件
你可以通过仅仅修改entry对象来指定任意数量的入口/输出点。
打包多个文件
'use strict';
const webpack = require("webpack");
module.exports = {
context: __dirname "/src",
entry: {
app: ["./home.js", "./events.js", "./vendor.js"],
},
output: {
path: __dirname "/dist",
filename: "[name].bundle.js",
},
};
所有文件都会按照数组的顺序一起被打包成一个dist/app.bundle.js文件。
输出多个文件
const webpack = require("webpack");
module.exports = {
context: __dirname "/src",
entry: {
home: "./home.js",
events: "./events.js",
声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系
[邮箱地址] 删除
| 
注册
登录
