首页 > 解决方案 > 使用 Webpack 缩小 JS 文件

问题描述

我正在尝试使用 webpack 来缩小我所有的 js、.css、图像和字体文件。在研究 Webpack 时,我首先尝试使用 JS 文件。
在我的 js 文件夹中,我有文件 jquery-2.2.3.min.js、bootstrap.min.js、easing.js、move-top.js 和 SmoothScroll.min.js。
当我尝试运行 npm start 时,它会生成错误 Error: Conflict: Multiple chunks iss assets to the same filename principal.js (chunks jquery and bootstrap)。
下面是我的 webpack.config.js:

const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    entry: {
        jquery: './js/jquery-2.2.3.min.js',
        bootstrap: './js/bootstrap.min.js',
        easing: './js/easing.js',
        move_top: './js/move-top.js',
        smooth_scroll: './js/SmoothScroll.min.js',
    },
    output: {
        filename: 'default.js',
        path: __dirname + '/public'
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "style.css"
        })
    ],
    module: {
        rules:[
                {
                    test: /\.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader'
                    ]
                },
                {
                    test: /\.(png|svg|jpg|jpeg|gif)$/,
                    use: [
                        'file-loader'
                    ]
                }
            ]
        }
}

标签: webpack

解决方案


推荐阅读