手动搭建webpack环境的分离_webpack环境分离-优快云博客

本文详细解析了Webpack的配置文件，包括入口文件设置、开发与生产环境的配置差异、加载器使用、插件集成及热更新机制。通过具体示例，展示了如何实现代码分割、资源文件处理及样式文件的加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

config/index.js

const path = require("path");

const config = {
    entryPath: path.join(__dirname, "../src/index.js"),
    development: {
        mode: "development",
        port: 8689,
        host: "localhost",
        devtool: "cheap-module-eval-source-map",
    },
    production: {
        mode: "production",
        outputPath: path.join(__dirname, "../dist"),
        devtool: "source-map"
    }
}

module.exports = config;

webpack.base.js

const path = require("path");
const config = require("../config");
const CleanWebpackPlugin = require("clearn-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const baseConfig = {
    entry: config.entryPath,
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            loader: "babel-loader",
            options: {
                presets: ["@babel/preset-env"],
            }
        }, {
            test: /\.css$/,
            use: ["style-loader", "css-loader"],
        }, {
            test: /\.(jpg|gif|jpeg|png)$/,
            loader: "url-loader",
            options: {
                limit: 4000,
                name: "./img/[name].[ext]",
            }
        }, {
            test: /\.(ttf|woff|svg|eot)$/,
            loader: "file-loader",
            options: {
                name: "./font/[name].[ext]"
            }
        }, {
            test: /\.html$/,
            loader: "html-loader",
        }]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: "index.html",
            filename: "app.html",
            inject: true,
        })
    ]
}

module.exports = baseConfig;

webpack.dev.js

const path = require("path");
const webpack = require("webpack");
const config = require("../config");
const baseConfig = require("./webpack.base");
const webpackMerge = require("webpack-merge");

const devConfig = {
    mode: config.development.mode,
    module: {
        rules: [{
            test: /\.scss$/,
            use: ["style-loader", "css-loader", "sass-loader"],
        }]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
    ],
    devServer: {
        port: config.development.port,
        host: config.development.host,
    }
}

module.exports = webpackMerge(baseConfig, devConfig);

webpack.pro.js

const path = require("path");
const webpack = require("webpack");
const config = require("../config");
const baseConfig = require("./webpack.base");
const webpackMerge = require("webpack-merge");
const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");

const proConfig = {
    mode: config.production.mode,
    output: {
        path: config.production.outputPath,
        filename: "[hash]-[name].js",
    },
    module: {
        rules: [{
            test: /\.scss/,
            use: ExtractTextWebpackPlugin.extract({
                fallback: "style-loader",
                use: ["css-loader", "sass-loader"]
            })
        }]
    },
    plugins: [
        new ExtractTextWebpackPlugin("style.css")
    ],
    devtool: config.production.devtool,
}

module.exports = webpackMerge(baseConfig, proConfig);