vue init download template_Webpack（四）Vue

上一篇文章简单地介绍了一下webpack如何编译ES6以及Sass，实际上很多复杂的配置没有提到，因为我觉得复杂的配置在实战中讲大家印象应该会更深刻，所以打算在Vue实战中讲。下面就来讲讲如何使用Webpack编译Vue.js。

一、Vue.js

Vue.js是一个前端框架，其数据绑定、模块化等等特性可以帮助我们更好地进行开发。

大家可以熟悉一下官方文档：

介绍 — Vue.js

因为vue文件不能直接被浏览器识别，因此需要借助Webpack将vue文件编译成对应的文件。

二、Vue-CLI

Vue-CLI能够帮助我们完成各种配置从而快速初始化一个项目。

安装：

$ npm install -g @vue/cli
$ npm install -g @vue/cli-init
           

使用：

// 格式类似于：vue init <template-name> <project-name>
$ vue init webpack my-project
           

接着再通过命令行的一系列问答即可完成配置。

利用Vue-CLI快速搭建开发环境是极好的，但是抱着学习的心态，我们自己来编写一下Vue的配置吧。藉此也能让大家对Vue-CLI中的配置了解多一点。

三、自己编写Webpack配置

同样，先新建所需的文件与文件夹：

下面主要讲webpack.config.js。

编译Vue文件需要用到vue-loader（官网：https://vue-loader.vuejs.org/zh/）。

安装依赖：

$ cnpm i -D vue-loader vue-template-compiler
           

官网中有编写最简单的配置文件：

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]
}
           

其实到这里，我们已经可以成功编译Vue文件了。下面介绍如何使用一些预处理器（例如：pug、sass）以及配置ES6。

安装依赖：

$ cnpm i -D css-loader node-sass sass-loader pug pug-plain-loader vue-style-loader babel-loader @babel/core @babel/preset-env
           

rules配置项：

// rules中的r函数为：
// const r = (path) => resolve(__dirname, path)

rules: [
  {
    test: /.vue$/,
    loader: 'vue-loader'
  },
  {
    test: /.js$/,
    loader: 'babel-loader',
    include: [r('src')]
  },
  {
    test: /.pug$/,
    loader: 'pug-plain-loader'
  },
  {
    test: /.sass$/,
    use: [
      'vue-style-loader',
      'css-loader',
      {
        loader: 'sass-loader',
        options: {
          indentedSyntax: true
        }
      }
    ]
  }
]
           

我们在开发中一般需要一个html作为入口。要实现html自动化引入打包好的js需要使用HtmlWebpackPlugin这个插件。

$ cnpm i -D html-webpack-plugin
           

GitHub地址：jantimon/html-webpack-plugin

// 需要引入：const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
  new VueLoaderPlugin(),
  new HtmlWebpackPlugin({
    template: 'index.html'
  })
]
           

其中template配置项为生成html的模板，默认路径为src/index.html。可以手动设置为index.html，即根目录中的index.html。