Vue(四)之webpack和vue-cli

01-webpack介绍

官方文档：https://www.webpackjs.com/concepts/

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

# 全局下载webpack的3.12.0版本
npm install webpack@3.12.0 -g

# 查看版本
webpack -v

02-webpack的使用

# 把main.js 打包成 bundle.js
webpack ./main.js ./bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app"></div>
    <!-- bundle.js是通过webpack编译打包输出的js文件 -->
    <script type="text/javascript" src="./bundle.js"></script>

    <!-- webpack  ./main.js   ./bundle.js -->

    <!-- 这种语法浏览器不兼容 -->
    <!-- <script type="text/javascript">
        import Vue from './vue.js'
    </script>
    -->
</body>
</html>

module.html