使用webpack配置vue项目

使用webpack自己构建vue的脚手架

经过一段时间的学习，自己用webpack配置了一个vue项目，记录一下，内容太多，直接贴代码吧

一、webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const EslintWebpackPlugin = require("eslint-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserWebpackPlugin = require("terser-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
const { DefinePlugin } = require("webpack");
const path = require("path");
const isProduction = process.env.NODE_ENV === 'production'

function getStyleLoaders(pre) {
    return [
        isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader',
        'css-loader',
        {
            loader: 'postcss-loader',
            options: {
                postcssOptions: {
                    plugins: ["postcss-preset-env"] // 能解决大部分样式兼容问题, 需要在package.json中指定处理的程度范围
                }
            }
        },
        pre
    ].filter(pre => pre)
}

module.exports = {
    entry: {
        main: path.resolve(__dirname, "../src/main.js")
    },
    output: {
        filename: isProduction ? "js/[name].[contenthash:10].js" : "js/[name].js",
        chunkFilename: isProduction ? "js/[name].[contenthash:10].chunk.js" : "js/[name].chunk.js",
        assetModuleFilename: "static/[hash][ext][query]",
        path: isProduction ? path.resolve(__dirname, "../dist") : undefined,
        clean: true
    },
    module: {
        rules: [
            // 处理vue文件
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    cacheDirectory: path.resolve(__dirname, "../node_modules/.cache/vue-loader-cache")
                }
            },
            // 处理css
            {
                test: /\.css$/,
                use: getStyleLoaders()
            },
            // 处理scss
            {
                test: /\.s[ac]ss$/,
                use: getStyleLoaders('sass-loader')
            },
            // 处理图片
            {
                test: /\.(jpe?g|png|webp|svg|gif)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024
                    }
                }
            },
            // 处理其他资源
            {
                test: /\.(woff2?|ttf)$/,
                type: 'asset/resource'
            },
            // 处理js
            {
                test: /\.js$/,
                include: path.resolve(__dirname, "../src"),
                loader: "babel-loader",
                options: {
                    cacheDirectory: true,
                    cacheCompression: false
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "../public/index.html")
        }),
        new EslintWebpackPlugin({
            context: path.resolve(__dirname, "../src"),
            exclude: "node_modules",
            cache: true,
            cacheLocation: path.resolve(__dirname, "../node_modules/.cache/eslintCache")
        }),
        isProduction && new MiniCssExtractPlugin({
            filename: "styles/[name].css",
            chunkFilename: "styles/[name].[contenthash:10].css"
        }),
        isProduction && new CopyPlugin({
            patterns: [{
                from: path.resolve(__dirname, "../public"),
                to: path.resolve(__dirname, "../dist"),
                globOptions: {
                    dot: true,
                    gitignore: true,
                    ignore: ["**/index.html"],
                }
            }, ]
        }),
        new VueLoaderPlugin(),
        // cross-env定义的环境变量是给打包工具使用的
        // DefinePlugin定义的环境变量是给源代码使用，解决vue3页面警告问题
        new DefinePlugin({
            __VUE_OPTIONS_API__: true, // 使用选项式API
            __VUE_PROD_DEVTOOLS__: false // 是否开启生产模式下的devtools调试工具
        })
    ].filter(pre => pre),
    optimization: {
        splitChunks: {
            chunks: 'all'
        },
        runtimeChunk: {
            name: (entrypoint) => `runtime~${entrypoint.name}.js`
        },
        minimize: isProduction,
        minimizer: [new CssMinimizerPlugin(), new TerserWebpackPlugin()]
    },
    resolve: {
        extensions: ['.vue', '.js', '.json'],
        alias: {
            '@': path.resolve(__dirname, "../src")
        }
    },
    // 开启开发服务器
    devServer: {
        host: 'localhost',
        port: 80,
        open: true,
        hot: true // 开启热模块替换
    },
    // 开启sourcemap，打包成生成map文件方便代码调试
    devtool: isProduction ? 'source-map' : 'cheap-module-source-map',
    mode: isProduction ? 'production' : 'development'
}

二、Eslint配置

module.exports = {
    root: true,
    env: {
        node: true,
    },
    extends: ["plugin:vue/vue3-essential", "eslint:recommended"],
    parserOptions: {
        parser: "@babel/eslint-parser",
    },
};

三、babel配置

module.exports = {
    presets: ["@vue/cli-plugin-babel/preset"],
};

这里其实eslint和babel的部分配置是可以在webpack.config.js中完成的，具体的配置规则自己上官网查一下吧

四、package.json包依赖情况

"devDependencies": {
        "@babel/core": "^7.18.6",
        "@babel/eslint-parser": "^7.18.2",
        "@vue/cli-plugin-babel": "^5.0.8",
        "babel-loader": "^8.2.5",
        "cross-env": "^7.0.3",
        "css-loader": "^6.7.1",
        "css-minimizer-webpack-plugin": "^4.0.0",
        "eslint": "^8.19.0",
        "eslint-plugin-vue": "^9.2.0",
        "eslint-webpack-plugin": "^3.2.0",
        "html-webpack-plugin": "^5.5.0",
        "less-loader": "^11.0.0",
        "mini-css-extract-plugin": "^2.6.1",
        "postcss-loader": "^7.0.1",
        "postcss-preset-env": "^7.7.2",
        "sass": "^1.53.0",
        "sass-loader": "^13.0.2",
        "style-loader": "^3.3.1",
        "vue-loader": "^17.0.0",
        "vue-template-compiler": "^2.7.5",
        "webpack": "^5.73.0",
        "webpack-cli": "^4.10.0",
        "webpack-dev-server": "^4.9.3"
    },
    "browserslist": [
        "last 2 version",
        "> 1%",
        "not dead"
    ],
    "dependencies": {
        "copy-webpack-plugin": "^11.0.0",
        "eslint-config-react-app": "^7.0.1",
        "vue": "^3.2.37",
        "vue-router": "^4.1.2",
        "vue-style-loader": "^4.1.3"
    }

上面的"browserslist"配置用于和postcss-loader配合使用，解决样式兼容问题，目的是告诉postcss-loader样式处理的程度范围