webpack5搭建vue3全家桶环境配置

1.配置文件

const path=require('path')
const {VueLoaderPlugin}=require('vue-loader')
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
    entry:'./src/app.js',
    mode:'development',
    devtool:'source-map',
    output:{
        path:path.join(__dirname,'/dist'),
        filename:'[name].js',
        clean:true
    },
    module:{
        rules:[
            //js
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [['@babel/preset-env',{
                            "targets": {
                                "chrome": "58",
                                "ie": "11"
                            },
                            useBuiltIns:'usage',
                            corejs:3
                        }]]
                    }
                }
            },
            //vue
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            //css
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
            //sass
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
        ]
    },
    watchOptions:{
        aggregateTimeout:1000,
        poll:1000,
        ignored:/node_modules/
    },
    devServer:{
      historyApiFallback: true,
      host:'127.0.0.1',
      port:9000,
      static:{
        publicPath:path.join(__dirname,'/dist')
      },
      open:true,

    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./public/template.html',
            name:'index.html'
        }),
        new VueLoaderPlugin()
    ]
}

2.pakage.json

{
  "name": "mypro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev":"npx webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "core-js": "^3.18.0",
    "node-sass": "^6.0.1",
    "vue": "^3.2.18",
    "vue-loader": "^16.8.1",
    "vue-router": "^4.0.11",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "@vue/compiler-sfc": "^3.2.18",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.3.0",
    "html-webpack-plugin": "^5.3.2",
    "sass": "^1.42.1",
    "sass-loader": "^12.1.0",
    "style-loader": "^3.3.0",
    "webpack": "^5.54.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.2.1"
  }
}