webpack4-05-配置vue相關

vue安裝相關

webpack解析vue會用到的兩個包分別為： vue-loader、vue-template-compiler

安裝：

npm i vue-loader vue-template-compiler -D
複製程式碼

vue-loader用於載入 .vue 字尾檔案

vue-template-compiler用於編譯模板

還有我們的主角vue：

npm i vue -S
複製程式碼

注意：

在安裝vue-template-compiler、vue包時，兩個包的版本必須保持同步，這樣 vue-loader 就會生成相容執行時的程式碼。這意味著你每次升級專案中的 vue 包時，也應該匹配升級 vue-template-compiler。

配置檔案、App.vue、main.js

build/wbpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const autoprefixer = require('autoprefixer')
const webpack = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')   // 新增

const resolve = (dir) =>  path.resolve(__dirname, dir)
module.exports = {
  mode: 'development',
  entry: {
    // app: ['@babel/polyfill', resolve('../src/index.js')]     
     app: ['@babel/polyfill', resolve('../src/main.js')]   // 修改入口檔案
  },
  output: {
    filename: 'bundle.js',
    path: resolve('../dist')
  },
  devServer: {
    open: true,
    hot: true,
    port: 3002,
    contentBase: resolve(__dirname, "./dist")
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader'
      },
      {
        test: /\.(css|scss|sass)$/,
        use: [
          // {
          //   loader: 'vue-style-loader'
          // },
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            }
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: require('dart-sass')
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
        },
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.vue$/,             // 新增
        loader: 'vue-loader'        // 新增
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),          // 新增
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Lesson-05',
      template: resolve('../public/index.html')
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
} 
複製程式碼

App.vue：

<style lang="scss" scoped>
  #app {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 35px;
  }
</style>


<template>
  <div id="app">
    <div><img src="./assets/images/logo.png"></div>
    <h1>Hello Vue</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
複製程式碼

main.js:

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

new Vue({
  el: '#box', 
  render: h => h(App)
})
複製程式碼

現在可以嘗試執行

npm run serve
複製程式碼

發現完美的跑起了一個簡單的vue專案。

完美 +1

到這裡其實還沒有完，其實需要解決掉兩個小問題。

可以看main.js中，引入的App.vue是攜帶了字尾名的，在實際開發中，其實是省略掉這個字尾的。
如果用過vue-cli的同學會發現，當我們引入資源的時候，在路徑前面會多一個@符號。例如：<img src="@/assets/images/logo.png">，這個是怎麼做到的呢？

其實這兩個問題，都是用配置檔案中 resolve 選項配置。

配置如下：

build/webpack.config.js

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

const resolve = (dir) =>  path.resolve(__dirname, dir)
module.exports = {
  mode: 'development',
  entry: {
    app: ['@babel/polyfill', resolve('../src/main.js')]
  },
  output: {
    filename: 'bundle.js',
    path: resolve('../dist')
  },
  devServer: {
    open: true,
    hot: true,
    port: 3002,
    contentBase: resolve(__dirname, "./dist")
  },
  resolve: {                                // 新增
    extensions:['.js', '.json', '.vue'],    // 新增
    alias:{                                 // 新增
      '@': resolve('../src')                // 新增
    }                                       // 新增
  },                                        // 新增
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader'
      },
      {
        test: /\.(css|scss|sass)$/,
        use: [
          // {
          //   loader: 'vue-style-loader'
          // },
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            }
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: require('dart-sass')
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
        },
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Lesson-05',
      template: resolve('../public/index.html')
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
} 
複製程式碼

注意：

resolve.extensions 選項預設值是['.js', '.json']，當配置的時候會把預設值給覆蓋掉，所以需要把預設值的配置也加上，最終：

...省略
resolve: {
    extensions: ['.js', '.json', '.vue']        // ['.js', '.json']預設值
}
...省略
複製程式碼

App.vue

...省略

<template>
  <div id="app">
    <div><img src="@/assets/images/logo.png"></div>     // 新增@
    <h1>Hello Vue</h1>
  </div>
</template>

...省略
複製程式碼

main.js

import Vue from 'vue'
import App from './App'     // 省略了.vue字尾

new Vue({
  el: '#box',
  render: h => h(App)
})

複製程式碼

再次執行

npm run serve
複製程式碼

能正常預覽說明成功了！最終完成了vue配置。

更多相關的配置可以參vue-loader官方文件

專案地址

原始碼地址點選這GitHub

webpack4-05-配置vue相關

vue安裝相關

最新目錄

配置檔案、App.vue、main.js

完美 +1

專案地址

相關文章