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。

最新目錄

lesson-05
    |- build
    |- node-modules
    |- pubilc
    |- package.json
    |- package-lock.json
    |- /src
        |- assets
            |- images
                |- logon.png    // 新增
        |- App.vue              // 新增
        |- index.js
        |- main.js              // 新增

複製代碼

配置文件、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

到這裏其實尚未完，其實須要解決掉兩個小問題。

1. 能夠看main.js中，引入的App.vue是攜帶了後綴名的，在實際開發中，實際上是省略掉這個後綴的。
2. 若是用過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