split chunks

最新推荐文章于 2025-07-13 00:22:27 发布

原创最新推荐文章于 2025-07-13 00:22:27 发布 · 273 阅读

0 ·

CC 4.0 BY-SA版权

webpack 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了Webpack的高级配置方法，包括使用HtmlWebpackPlugin自动生成HTML文件、CleanWebpackPlugin清理输出目录、ManifestPlugin生成资源映射文件，以及如何设置HotModuleReplacementPlugin实现模块热替换。还涉及了多入口文件、source-map的配置、CSS加载器的使用等关键知识点。

----------------step1---

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 生成index.html
const {CleanWebpackPlugin} = require('clean-webpack-plugin'); //清空dist目录
var ManifestPlugin = require('webpack-manifest-plugin'); //生成关系文件a mapping of all source file names to their corresponding output file
const webpack = require('webpack');
module.exports = {
    // entry: './src/index.js',
    mode: 'development',
    entry: {
        index: './src/index.js',
        // print: './src/print.js'
        another: './src/another-module.js'
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
        hot: true
    },
    devtool: 'inline-cheap-module-source-map',
    plugins: [
        new ManifestPlugin(),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Output Management'
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
    // output: {
    //     filename: 'bundle.js',
    //     path: path.resolve(__dirname, 'dist')
    // }
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

----------------step2---