Vue Cli 之Webpack打包

1. Webpack打包工具

• 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）
• Vue 脚手架工具 vue-cli 使用 webpack 进行打包，开发时可以启动本地开发服务器，实时预览。 因为需要对整个项目文件进行打包，开发服务器启动缓慢。
• 而对于开发时文件修改后的热更新 HMR 也存在同样的问题。
• Webpack 的热更新会以当前修改的文件为入口重新 build 打包，所有涉及到的依赖也都会被重新加载一次。

webpack打包原理：

项目中散落着各种代码以及资源文件，这些代码、资源文件都可以看做是项目中的模块，webpack会根据我们的配置找到一个文件，作为入口文件。
一般是main.js文件，顺着这个文件中的代码，代码中出现的import和require之类的语句，解析推断出这个文件所依赖的资源模块，分别解析每个模块的依赖，最后形成每个项目中所有用到的文件之间的依赖关系树。
有了这个依赖关系树后，webpack会遍历，或者更准确地说：递归这个依赖关系树，找到每个节点对应的资源文件，然后根据配置文件中的loader配置，交给加载器去加载这个模块。
最后将加载的结果放入bundle.js，也就是打包结果中，从而实现整个项目的打包。

1.1. 使用 loader

// webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。
// loader是webpack中一个非常核心的概念, loader有很多种, 不同的内容需要使用不同的loader来加载
// 首先安装对应的 loader：
npm install --save-dev css-loader ts-loader
// 指示 webpack 对每个 `.css` 使用 css-loader以及对所有 `.ts` 文件使用 ts-loader

// 将ES6转换成ES5,将scss, less转成css

1.2 loader 相关配置

// css-loader: 只负责加载css文件
// style-loader: 负责将样式加载到Dom中
// 在解析css的过程中, 先用到的是css-loader, 然后使用到的是style-loader
// 但loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)，所以use中的顺序是不能改变的

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          // [style-loader](/loaders/style-loader)
          { loader: 'style-loader' },
          // [css-loader](/loaders/css-loader)
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          // [sass-loader](/loaders/sass-loader)
          { loader: 'sass-loader' }
        ]
      }
    ]
  }
}