報(bào)錯(cuò)出現(xiàn)背景：初始化項(xiàng)目后，執(zhí)行了

npm i webpack vue vue-loader

vue文件代碼：

<template>
  <div id='test'>{{ text }}</div>
</template>

<script>
export default {
  data() {
    return {
      text: 'abc'
    }
  }
}
</script>

<style>
  #test {
    color: red;
  }
</style>

webpack.config.js

const path = require('path')

module.exports = {
  entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'budle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
    ]
  },
}

入口文件 index.js

import Vue from 'vue'
import App from './app.vue'
const root = document.createElement('div')
document.body.append(root)

new Vue({
  render: (h) => h(App)
}).$mount(root)

• 報(bào)錯(cuò)1: npm run build 報(bào)了沒有找到webpack的錯(cuò)誤
  原因： webpack和webpack-cil需要同時(shí)安裝

• 報(bào)錯(cuò)2:

  控制臺(tái)輸出錯(cuò)誤
  
  原因： vue-loader 15版本須在配置文件中增加VueLoaderPlugin配置,

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

module.exports = {
  entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'budle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

• 報(bào)錯(cuò)3：
  錯(cuò)誤輸出
  
  原因：對(duì)于css樣式編譯晚胡，需要使用style-loader塔橡、css-loader腋逆、以及postcss-loader环疼，并且在config.js中聲明使用蹋嵌。

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

module.exports = {
  entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'budle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader','css-loader']
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

補(bǔ)充：再編譯時(shí)還需要使用到 vue-template-compiler

package.json配置：

{
  "name": "vuestudy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "css-loader": "^5.0.1",
    "postcss": "^8.2.1",
    "postcss-loader": "^4.1.0",
    "style-loader": "^2.0.0",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.5",
    "vue-template-compiler": "^2.6.12",
    "webpack-cli": "^4.2.0"
  },
  "devDependencies": {
    "webpack": "^5.10.3"
  }
}