我想要从零开始构建自己的应用，比如使用ssr-vue。而官方vue-cli没有类似原有template的ssr版。
看来，我需要学会webpack了

已有的学习经历

vue-cli自带的webpack配置，看过好几次。自己添加一些chunk，自动生成多个页面，觉得自己做了很大一件事情，而客观上并不大。
webpack文档尝试看了好几次，从来觉得太长没看完。

Current

链接地址： http://www.css88.com/doc/webpack2/concepts/module-resolution/
我还是从头开始看了入口文件，配置方法。
目前看来，概念部分，应该是一口气看完的。然后再在指南不烦，联系代码片段。
这儿，我联想到了vimtutor中的练习方式。

基本配置文件

啃了webpack文档后，能快速手打webpack的最简单配置文件。所有的配置都在此基础上添加。 

1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
  entry: '/path/to/entry/file',
  output: {
    filename: 'output.js',
    path: __dirname
  },
  module:{
    rules:[
      ...
    ]
  }
}

常见选项

  1. resolve
    webpack 解析。
    1
    2
    3
    4
    5
    6
    resolve: {
        alias: {
          'vue': 'vue/dist/vue.common.js'
        }
        // extensions: ['.ts', '.vue', '.js']
      }

默认逻辑不够准确时，需要手动添加alias。
需要为vue使用 vue.esm.js时，可以通过添加alias更改。

  1. devtool 
    1
    devtool: 'source-map'

用来生成source-map文件

  1. entry
    可由基本的 值 变成 键-值。 

    1
    2
    3
    4
    entry: {
      main: './main.js',
      server: './server.js'
    }

  2. output 

    output: {
filename: '[chunk].bundle.js',
path: path.resolve(__dirname, 'dist')
}

    需要先 const path = require('path'), 这里path属性的写法即使用兼容全平台的方式指定当前目录下的dist目录为输出目录。
    filename属性的[chunk]能让entry中的main.js 输出为 main.bundle.js ，类似的还有[name]、[chunkhash]、[hash]。

  3. rules
    指定loader。webpack2兼容webpack1等loader写法。