尼克陈·前端随想录

webpack处理vue

使用vue-loader，vue-loader含loader和plugin，需同时使用。

vue-loader会把.vue文件编译成html、css、js/ts 3个部分，再让ts-loader,css-loader等去进一步编译。

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  devServer: {
    hot: true,
    open: true
  },
  module: {
    rules: [
      { test: /\.vue$/, use: ['vue-loader'] },
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      templateContent: `
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
  </head>
  <body>
    <div id="app" />
  </body>
</html>
    `
    })
  ]
}

注意，使用ts时ts-loader无法识别vue文件，需要添加声明文件src/shims-vue.d.ts

declare module '*.vue' {
  import { ComponentOptions } from 'vue'
  const componentOptions: ComponentOptions
  export default componentOptions
}

declare module 'vue/types/vue' {
  // import VueRouter, { Route } from 'vue-router';
  interface Vue {
    // $router: VueRouter; // 这表示this下有这个东西
    // $route: Route;
    $http: any;
    $Message: any;
    $Modal: any;
  }
}