适用于VueJS用户的无网络Webpack简介

对于许多开发人员来说，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">{{ message }}</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对象，并且是首先加载的，所以我们能够在app.js脚本中使用Vue对象。如果这两个条件都不满足，脚本就会崩溃。考虑一下我们试图在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. esb .browser.js可用时才能运行。也不需要全局变量，因为模块是由它们的文件名引用的。

问题是浏览器并不始终支持ES模块。事实上，直到几个月前，任何浏览器都不支持它。

如果我们想使用ES模块或任何其他JavaScript模块系统，我们需要将代码解析为能够在浏览器中可靠使用的代码。输入Webpack。

捆绑

Webpack是一个在开发环境中离线运行的Node.js工具。Webpack能够在一个称为“捆绑”的过程中将JavaScript模块解析为浏览器友好的代码。

捆绑以“入口文件”开始。Webpack分析输入文件以找到任何依赖项。在示例项目中，app.js是条目文件，只有一个依赖项Vue.js。在大多数项目中，会有更多。

然后Webpack分析依赖项，以找到它们可能具有的任何依赖项。此过程将继续，直到找到项目的所有依赖项。

结果是一个依赖关系图。对于示例项目，图中包括app.js、vue.js和Webpack所需的一些其他依赖项。

1 (2).jpg-600

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">{{ message }}</div>
  <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

加载器

Webpack为JavaScript依赖关系管理问题提供了一个可靠的解决方案。从这个基础上，其他强大的出现，如加载器。

加载器允许Webpack在打包之前转换文件。例如，Webpack Babel加载器将下一代JavaScript语法(如ES2015)转换为标准ES5。这允许开发人员使用现代特性编写代码，但仍然在旧浏览器中提供支持。

例如，在app.js中，我们使用的是不受IE10支持的ES2015 const:

app.js

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  }  
});

如果使用Webpack Babel加载器，const将在添加到包之前转换为var:

bundle.js

...

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  }  
});

...

加载器有很多：

CSS加载器
Sass加载器
Typescript加载器
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$': 'vue/dist/vue.esm.js'
    }
  }
};

创建配置文件后，Webpack就可以使用CLI命令运行了: