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。