对于许多开发者来说，Vue.js是他们学到的第一个前端JavaScript框架。如果这对你是真的，你可能还没有理由学习Webpack。但是当你继续使用Vue时，你会看到Webpack在文档，示例项目和Vue CLI等工具中反复出现。 Webpack为Vue用户提供了很多好处： 一个自动化的开发过程，使编码轻而易举 一个方便的开发功能的世界，如Vue的心爱的单文件组件 优化您的代码，使其快速和精益 但是Webpack的可能性的范围也是为什么它起初如此吓人。它似乎做了很多事情，很难把握到底是什么。 Webpack指南在解释Webpack方面越来越好，但是仍然有一定的背景知识。在这篇文章中，我会试着给你提供那种背景，而不用那些可能会让你感到困惑的行话。 示例项目 Webpack可以帮助您开发JavaScript应用程序，所以要讨论它，我们应该考虑一个简单的示例项目。以下是我将在整篇文章中提到的内容： app.js const app = new Vue({ el: '#app', data: { message: 'Hello World' } }); index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue.js Project</title> </head> <body> <div id="app"></div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript" src="app.js"></script> </body> </html> 依赖 Webpack的故事首先是关于如何在HTML文档中管理JavaScript依赖关系的观察。“依赖”指的是第三方库，如Vue，jQuery或Lodash，甚至是其他脚本文件。 实际上，除了确保任何共享函数和变量具有全局范围并且脚本以正确的顺序加载之外，没有真正的方法来管理HTML文档中的依赖关系。 例如，由于vue.js定义了一个全局Vue对象并首先被加载，所以我们可以Vue在我们的app.js脚本中使用该对象。如果这些条件中的任何一个没有得到满足，脚本就会中断。Vue在加载之前，请尝试使用以下内容： <script> console.log(Vue); // Uncaught ReferenceError: Vue is not defined </script> <script type="text/javascript" src="vue.js"> </script> 在一个复杂的Web应用程序中，这个系统是不够的， 全局变量引入了命名冲突的可能性 脚本加载顺序很脆弱，可随着应用程序的增长而轻松破解 性能优化（如异步加载脚本）无法使用 模块 依赖性管理问题的解决方案是使用模块化系统，其中代码被模块化并导入到其他脚本中。多年来，已经开发了几种不同的JavaScript模块系统，但是ES模块是现在被整合到JavaScript标准中的系统。 这里有一个简单的ES模块示例： moduleA.js export default function(value) { return value * 2; } moduleB.js import multiplyByTwo from './moduleA'; console.log(multiplyBy2(2)); // 4 我们可以使Vue.js成为一个模块，并避免讨论的问题？是! 直接在浏览器中使用的Vue.js脚本文件只是Vue的可用版本之一。还有一个名为vue.esm.browser.js的ES模块构建，可以在我们的示例项目中使用，如下所示： app.js import Vue from './vue.esm.browser.js'; const app = new Vue({ el: '#app', data: { message: 'Hello World' } }); 现在脚本顺序不是问题，因为编译器知道它必须等到vue.esm.browser.js可用之后才能运行。全局变量不需要，因为模块是由它们的文件名引用的。 问题是ES模块在浏览器中不一致的支持。事实上，直到几个月前，它在任何浏览器中都不被支持。 如果我们想要使用ES模块或任何其他JavaScript模块系统，我们需要将代码解析成可以在浏览器中可靠使用的代码。输入Webpack。 捆绑 Webpack是一个在您的开发环境中脱机运行的Node.js工具。Webpack能够在称为“绑定”的过程中将JavaScript模块解析为适合浏览器的代码。 捆绑以“入口文件”开始。Webpack分析条目文件以查找任何依赖关系。在示例项目中，app.js是入口文件，只有一个依赖项Vue.js. 在大多数项目中，会有更多。 Webpack然后分析依赖关系来找到它们可能具有的任何依赖关系。这个过程一直持续到找到项目的所有依赖关系。 结果是依赖关系图。对于示例项目，该图包含app.js，vue.js和Webpack所需的一些其他依赖项。 Webpack使用这个图形作为将所有代码捆绑到一个浏览器友好文件中的蓝图。 在示例项目中，bundle文件将替换HTML文档中的各个脚本文件vue.js和app.js： index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue.js Project</title> </head> <body> <div id="app"></div> <script type="text/javascript" src="bundle.js"></script> </body> </html> Loaders Webpack为JavaScript依赖管理问题提供了一个可靠的解决方案。从这个基础上，其他的强大的加载器就出现了。 Loaders允许Webpack在捆绑之前转换文件。例如，Webpack Babel加载器将下一代JavaScript语法（如ES2015）转换为标准ES5。这使开发人员可以使用现代功能编写代码，但仍旧在旧版浏览器中提供支持。 例如，在app.js中，我们使用constIE10不支持的ES2015 ： app.js const app = new Vue({ el: '#app', data: { message: 'Hello World' } }); 如果使用Webpack Babel加载器，则在const将var其添加到bundle之前将被转换为： bundle.js ... var app = new Vue({ el: '#app', data: { message: 'Hello World' } }); ... 还有很多其他的装载机，包括： CSS加载器 Sass loader 打字机装载机 Vue Loader（用于单文件组件） 运行Webpack Webpack使用声明性配置文件来描述构建的每个方面。这些配置文件非常长，难以遵循，但是对于一个简单的项目，您应该能够得到这样的要求： webpack.config.js module.exports = { // Entry file entry: './app.js', output: { // Output bundle filename: 'bundle.js' }, module: { rules: [ { // For .js files... test: /\.js$/, use: { // Use the Babel loader loader: 'babel-loader' } } ] }, resolve: { alias: { // Ensure the right Vue build is used 'vue
