目录结构

基础配置

本配置只是基础配置，不带优化功能，若用于生成环境，还需研究加上各种优化功能

运行开发模式通过命令webpack serve

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
//const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const { VueLoaderPlugin } = require('vue-loader')
//生成模式下，用MiniCssExtractPlugin.loader替换style-loader抽离css
const cssLoader = ['vue-style-loader', 'css-loader', {
    loader: 'postcss-loader',
    options: {
        postcssOptions: {
            plugins: [
                [
                    'postcss-preset-env',
                    {
                        // 其他选项
                    },
                ],
            ]
        }
    }
}]
module.exports = {
    mode: 'development',
    entry: resolve(__dirname, 'src/index.js'),
    output: {
        filename: '[name][contenthash:8].js',
        path: resolve(__dirname, 'dist'),
        environment: {
            //不要使用箭头模式，兼容IE9
            arrowFunction: false
        },
        //统一修改资源生成路径
        assetModuleFilename: 'assets/[hash:8][ext][query]',
        clean: true
    },
    devServer: {
        compress: true,
        static: {
            directory: resolve(__dirname, 'dist'),
        },
        liveReload: true,
    },
    target: "web",
    module: {
        rules: [
            {
                test: /\.vue$/i,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/i,
                exclude: /node_modules/,
                use: [{
                    loader: 'babel-loader',
                    /**
                     * package.json配置
                     * "browserslist": [
                            "> 1%",
                            "last 2 versions",
                            "not ie <= 8"
                        ]
                     */
                    //可以将配置单独抽离到.babelrc文件
                    options: {
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    modules: false,
                                    useBuiltIns: "usage",
                                    corejs: 3
                                }
                            ]
                        ]
                    }
                }],
            },
            {
                test: /\.css$/i,
                use: cssLoader,
            },
            {
                test: /\.scss$/i,
                use: [...cssLoader, 'sass-loader']
            },
            {
                test: /\.html$/i,
                loader: "html-loader",
            },
            /**webpack5合成了资源模块，会自动处理图片，字体等等资源文件，
             * 因此不需要使用loader
             */
            {
                test: /\.(png|jpe?g|gif)$/i,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 4 * 1024 // 4kb
                    }
                }
            },
            {
                test: /\.(ttf|woff2)$/i,
                type: 'asset',
                generator: {
                    //单独修改生成路径
                    filename: 'font/[hash:8][ext][query]'
                }
            },
            
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: resolve(__dirname, 'src/index.html')
        }),
        // new MiniCssExtractPlugin({
        //     filename: 'style/[name][contenthash:8].css'
        // }),
        new VueLoaderPlugin(),
    ],
    resolve: {
        alias: {
            vue$: resolve(__dirname, 'node_modules/vue/dist/vue.esm.js')
        }
    }
}

main.js

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

package.json

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]