一、安装webpack-dev-server

目的：查看

cnpm i webpack-dev-server -S

  1. cnpm i webpack-dev-server -S

webpack.config.js文件

加上

  1. devServer:{
  2.         contentBase:"./dist"
  3.     },

package.json文件

  1. "scripts": {
  2.     "build": "webpack --config webpack.config.js",
  3.     "serve":"webpack serve --open"//加上
  4.   },

npm run serve

自动打开网页，此时在main.js文件中修改也能实现启动服务

二、source-map实现错误追踪

webpack.config.js文件

  1. devtool:"inline-source-map",//实现错误追踪
  3. devServer:{
  4.         contentBase:"./dist",
  5.         port:8000,//改端口
  6.         host:"localhost",
  7. //报错会直接出现在界面上
  8.         overlay:{
  9.             errors:true
  10.         }
  11.     },

三、 安装vue-loader

cnpm i vue vue-loader vue-template-compiler -S

webpack.config.js文件


const {VueLoaderPlugin} = require("vue-loader")

module:{
      rules:[
          {
              test:/\.css$/i,
              use:['style-loader','css-loader']
          },
          {
              test:/\.vue$/,
              loader:'vue-loader'
          },
//四、配置图片
          {
              test:/\.(png|jpg|svg|gif|jpeg)$/i,
              type:'asset/resource'
          },
      ]  
    },

plugins:[
      new HtmlWebpackPlugin({
          title:"webpack-vue",
          template:path.join(__dirname,"public/index.html")//加
      }),
      new CleanWebpackPlugin(),
      new VueLoaderPlugin()//加
    ],

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="../dist/bundle.js"></script> -->
</head>
<body>
    <div id="app"></div>
</body>
</html>

src/App.vue

<template>
    <div>
    hello webpack
    good
    <img src="./assets/dog.png" alt="">
    </div>
</template>

<script>
    export default {
        data(){
            return {
                msg:"test"
            }
        }
    };
</script>

<style scoped>

</style>

src/main.js

import './assets/index.css';
import App from './App.vue';
import Vue from 'vue';
new Vue({
    render:h=>h(App)
}).$mount("#app");

Tips:设置webpack.config.js之后,项目必须重新启动。

四、配置图片

module:{
      rules:[
          {
              test:/\.css$/i,
              use:['style-loader','css-loader']
          },
          {
              test:/\.vue$/,
              loader:'vue-loader'
          },
//四、配置图片
          {
              test:/\.(png|jpg|svg|gif|jpeg)$/i,
              type:'asset/resource'
          },
      ]  
    },

src/App.vue

vbase-css

<template>
    <div>
    hello webpack
    good
    <img src="./assets/dog.png" alt="">
    </div>
</template>

<script>
    export default {
        data(){
            return {
                msg:"test"
            }
        }
    };
</script>

<style scoped>

</style>

npm run build

npm run build //将项目打包,打包之后的项目就可以上传服务器了
npm run serve/yarn serve  //查看项目的运行效果

完整代码