使用 Webpack 来构建 Vue 项目

├── index.html         ==> 根本件，最后用于展示 App.vue 组件
├── main.js            ==> 入口文件
├── App.vue            ==> vue 组件
├── pacjage.json       ==> 工程配置文件（依赖，配置）
└── webpack.config.js  ==> webpack 配置文件

// html
<div id='box'></div>

// main.js
import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#box',
  // 关于 h => h(App) 见最下方
  render: h => h(App)
})

// webpack.config.js
module.exports = {
  // 入口文件
  entry: './main.js',

  // 出口文件
  output: {
    filename: 'bundle.js',
    // 当前路径
    path: __dirname
  }
};

// index.html
<script src='./bundle.js'></script>

output: {

  // 如果目录，如果不存在则会去新建
  path: path.resolve(__dirname, './src'),

  // 设置静态目录（可以从这个目录下直接进行读取）
  publicPath: '/src/',

  // 文件名称
  filename: 'bundle.js'

},

module: {
  // 所有的 loader 都配置在这里
  rules: [
    // 下面这句的意思是 使用 vue-loader 来解析处理以 .vue 结尾的文件
    // 如果多个 loader 的话，中间可以使用 ! 来连接，比如 style!css
    {
      test: /\.vue$/,
      loader: 'vue-loader'
    }
  ]
}

npm install vue-template-compiler css-loader vue-style-loader vue-hot-reload-api --save-dev

module: {
  rules: [
    // 规则和上面类似，需要注意的就是多了一个 exclude
    // 意思是 匹配除了 /node_modules/ 和 bower_components 之外的所有 .js 文件
    // 关于 options 选项，如果在根目录下的 .babelrc 配置了，这里就不需要了，两者是一样的
    // 关于 .babelrc 见最后
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          // 先配置一个前置
          presets: ['es2015'],
          // 还需要一个插件来使每次改变的时候，实时编译
          plugins: ['transform-runtime']
        }
      }
    }

  ]
}

babel-loader                    ==> 主程序

babel-core                      ==> 编译核心（语法层面）

babel-plugin-transform-runtime  ==> 实时编译插件

babel-perset-es2015             ==> es6 语法

babel-runtime                   ==> 上面几个程序需要这个组件来运行（babel 执行环境）

vue-loader                      ==> 编译写入 .vue 文件

// 处理 .vue 中的模版
vue-template-compiler           ==> 编译 vue 的 template 部分，（之前使用的是 vue-html-loader） 

// 处理 css，因为 css 分为 .css 文件和行内样式，需要同时加载
css-loader                      ==> 编译写入 css
vue-style-loader                ==> 编译 vue 的样式部分

// 处理 js
vue-hot-reload-api              ==> 使 webpack 对 vue 实现热替换

// 使用 babel 来处理 es6 语法
babel-loader                    ==> 主程序
babel-core                      ==> 编译核心（语法层面）
babel-plugin-transform-runtime  ==> 实时编译插件
babel-perset-es2015             ==> es6 语法
babel-runtime                   ==> 上面几个 babel 程序需要这个组件来运行（babel 执行环境）

// 处理文件和图片
file-loader                     ==> 用于打包文件和图片，默认情况下生成文件的文件名是文件名与 md5 哈希值的组合

// webpack
webpack                         ==> webpack 主程序
webpack-dev-server              ==> webpack 执行环境

// vue
vue                             ==> 这个就不用多说了

// 可选
url-loader                      ==> 实际上是对 file-loader 的封装（见最后）
webpack-merge                   ==> 开发环境和生产环节的 webpaak 配置文件的配置合并

// 设置 scripts 即可
// --inline 自动刷新
// --hot 热载
// --port 设定端口（在端口被占用的情况下可以利用这个参数来指定，默认的为 8080）
'scripts': {
  'dev': 'webpack-dev-server --inline --hot'
}

Project is running at http://localhost:8080/

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available.

Either pre-compile the templates into render functions, or use the compiler-included build.

// ...

resolve: {
  alias: {
    'vue': 'vue/dist/vue.js' 
  }
}

render: function (createElement){
  return createElement(app)
}

render: function (createElement) {
  return createElement(
    // tag name 标签名称
    'h' + this.level,
    // 子组件中的阵列
    this.$slots.default
  )
}

new Vue({
  el: '#app',
  components: { App }
});

// html
<div id='app'>
  <app></app>
</div>

{
  'presets': ['es2015', 'stage-0'],
  'plugins': ['transform-runtime']
}

{
  test: /\.(png|jpg)$/,
  loader: 'url-loader?limit=8192'
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: 'raw-loader'
      }
    ]
  }
}

webpack --module-bind 'txt=raw-loader'

import txt from 'raw-loader!./file.txt';

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader', options: { sourceMap: true, modules: true } },
          { loader: 'sass-loader', options: { sourceMap: true } }
        ],
        exclude: /node_modules/
      }
    ]
  }
}