webpack 读取文件夹下的文件_软件开发|Webpack 2 入门

Webpack 2 一旦文档完成，就将结束 Beta 测试期。不过这并不意味着你现在不能开始使用第 2 版，前提是你知道怎么配置它。(LCTT 译注：Webpack 2.1 已经发布。)

Webpack 是什么

简单来说，Webpack 是一个 JavaScript 模块打包器。然而，自从它发布以来，它发展成为了你所有的前端代码的管理工具(或许是有意的，或许是社区的意愿)。

老式的任务运行器的方式：你的标记、样式和 JavaScript 是分离的。你必须分别管理它们每一个，并且你需要确保每一样都达到产品级

任务运行器((task runner))，例如 Gulp，可以处理许多不同的预处理器((preprocesser))和转换器((transpiler))，但是在所有的情景下，它都需要一个输入源并将其压缩到一个编译好的输出文件中。然而，它是在每个部分的基础上这样做的，而没有考虑到整个系统。这就造成了开发者的负担：找到任务运行器所不能处理的地方，并找到适当的方式将所有这些模块在生产环境中联合在一起。

Webpack 试图通过提出一个大胆的想法来减轻开发者的负担：如果有一部分开发过程可以自动处理依赖关系会怎样？如果我们可以简单地写代码，让构建过程最终只根据需求管理自己会怎样？

Webpack 的方式：如果 Webpack 了解依赖关系，它会仅捆绑我们在生产环境中实际需要的部分

如果你过去几年一直参与 web 社区，你已经知道解决问题的首选方法：使用 JavaScript 来构建。而且 Webpack 尝试通过 JavaScript 传递依赖关系使得构建过程更加容易。不过这个设计真正的亮点不是简化代码管理部分，而是管理层由 100% 有效的 JavaScript 实现(具有 Nodejs 特性)。Webpack 能够让你编写有效的 JavaScript，更好更全面地了解系统。

换句话来说：你不需要为 Webpack 写代码。你只需要写项目代码。而且 Webpack 就会持续工作(当然需要一些配置)。

简而言之，如果你曾经遇到过以下任何一种情况：

载入有问题的依赖项

意外引入一些你不需要在生产中用上的 CSS 样式表和 JS 库，使项目膨胀

意外的两次载入(或三次)库

遇到作用域的问题 —— CSS 和 JavaScript 都会有

寻找一个让你在 JavaScript 中使用 Node/Bower 模块的构建系统，要么就得依靠一个令人发狂的后端配置才能正确地使用这些模块

需要优化资产((asset))交付，但你担心会弄坏一些东西

等等……

那么你可以从 Webpack 中收益了。它通过让 JavaScript 轻松处理你的依赖关系和加载顺序，而不是通过开发者的大脑。最好的部分是，Webpack 甚至可以纯粹在服务器端运行，这意味着你还可以使用 Webpack 构建渐进增强式网站。

第一步

我们将在本教程中使用 Yarn(运行命令 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)或 require()(Nodejs)的依赖会在它解析代码的时候找到，它会在最终构建的时候打包这些依赖项。然后，它会搜索那些依赖项以及那些依赖项所依赖的依赖项，