效果图

撒法发.png

webpack.config.js

  1. const webpack = require("webpack");
  2. const path = require("path");
  3. const HtmlWebpackPlugin = require('html-webpack-plugin');
  4. const {CleanWebpackPlugin} = require("clean-webpack-plugin")
  5. const {VueLoaderPlugin} = require("vue-loader")
  6. const config = {
  7.     entry:path.resolve(__dirname,'src/main.js'),
  8.     output:{
  9.         path:path.resolve(__dirname,'dist'),
  10.         filename:'[hash]-bundle.js'
  11.     },
  12.     module:{
  13.         rules:[
  14.             {
  15.                 test:/\.css$/i,
  16.                 use:['style-loader','css-loader']
  17.             },
  18.             {
  19.                 test:/\.vue$/,
  20.                 loader:'vue-loader'
  21.             },
  22.             {
  23.                 test:/\.(png|jpg|svg|gif|jpeg)$/i,
  24.                 type:'asset/resource'
  25.             },
  26.         ]
  27.     },
  28.     plugins:[
  29.         new HtmlWebpackPlugin({
  30.             title:"webpack-vue",
  31.             template:path.join(__dirname,"public/index.html")
  32.         }),
  33.         new CleanWebpackPlugin(),
  34.         new VueLoaderPlugin()
  35.     ],
  36.     devServer:{
  37.         contentBase:"./dist",
  38.         port:8000,//改端口
  39.         host:"localhost",
  40.         overlay:{
  41.             errors:true
  42.         }
  43.     },
  44.     devtool:"inline-source-map",
  45.     mode:'development'
  46. }
  47. module.exports = config

src/assets/index.css

  1. div{
  2.     color: red;
  3. }

src/main.js

  1. import './assets/index.css';
  2. //console.log("hello world");
  3. import App from './App.vue';
  4. import Vue from 'vue';
  5. new Vue({
  6.     render:h=>h(App)
  7. }).$mount("#app");

src/App.vue

  1. <template>
  2.     <div>
  3.         <p>hello world</p>
  4.         <img src="./assets/dog2.jpg" alt="">
  5.     </div>
  6. </template>
  8. <script>
  9.     export default {
  10.         data(){
  11.             return {
  12.                 msg:"test"
  13.             }
  14.         }
  15.     };
  16. </script>
  18. <style scoped>
  20. </style>

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id="app">
    </div>
</body>
</html>

package.json

{
  "name": "web-package",
  "version": "1.0.0",
  "description": "{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}",

  "private": true,
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "serve": "webpack serve --open"
  },
  "repository": {
    "type": "git",
    "url": "git@gitee.com:dingmochou/web-package.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.1",
    "style-loader": "^2.0.0",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.6",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.17.0",
    "webpack-cli": "^4.4.0",
    "webpack-dev-server": "^3.11.2"
  }
}

.gitignore

node_modules