如何使用webpack打包vue2项目

一、在根目录创建webpack.config.js文件

const path = require("path")
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    // 1. 指定入口文件
    entry: './src/main.js',
    // 2. 指定输出文件
    output: {
        path: path.resolve(__dirname, 'dist'),//在这个配置中，所有生成的文件将被输出到该目录下。
        //它能够确保生成的路径是标准化的绝对路径，无论在哪个操作系统上运行代码，路径都能够正确解析。
        filename: 'main.js',
        publicPath: './',
    },
    module: {
        rules: [
            {
                // 处理.vue文件
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                // 处理.js文件, 使用Babel进行转义
                test: /\.js$/,
                exclude: /node_modules/,        //排除/node_modules/
                use: {
                    loader: 'babel-loader',
                },
            },
            {
                // 处理css文件
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,//将css文件单独处理
                    'css-loader',//加载css文件
                ],
            },
        ],
    },

    // 4. 配置解析别名
    resolve: {
        alias: {
            vue$: 'vue/dist/vue.esm.js',//在引入vue.js时可以使用别名'vue'
        },
    },

    // 5. 配置插件
    plugins: [
        new VueLoaderPlugin(), // 处理.vue文件的模块转换为js模块
        new HtmlWebpackPlugin({ // 根据模板生成html文件，将打包后的脚本的样式自动引入
            template: './index.html',
            filename: 'index.html',
        }),
        new MiniCssExtractPlugin({ // 将CSS抽取到单独的文件
            filename: 'style.css',
        }),
    ],

    // 6. 配置开发服务器
    devServer: {//用于配置开发服务器的相关参数，如监听的端口、内容目录等
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000,
    },

}

二、在package.json中设置

"scripts": {
    "build": "vue-cli-service build ",
  },

三、在vue.config.js中添加

 publicPath:"./"

四、终端运行

npm run build