webpack 多入口,增量更新不增量,每次都是重新打包

409 阅读1分钟

我这个项目原来是用gulp构建,现在想改用webpack 目前处理了js 和 scss 发现使用 watch 后 修改一个文件就全部打包,相当于没有增量。不知道什么原因,哪位大佬给看看。

image.png

const path = require('path');
const glob = require('glob');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WebpackBar = require('webpackbar'); //编译进度插件
let progressPlugin = new WebpackBar({
    color: "#85d",  // 默认green,进度条颜色支持HEX
    basic: false,   // 默认true,启用一个简单的日志报告器
    profile:false,  // 默认false,启用探查器。
})

const config = {
    mode: 'production',
    devtool: "source-map",
    entry: getEntrys(),

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },

    module: {
        rules: [
            {
                test: /.s[ac]ss$/i,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                }, {
                    loader: "css-loader", options: {
                        url: false,
                    },
                },
                    'sass-loader',
                ]
            }
        ],
    },

    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
        }),
        progressPlugin //进度条插件
    ],

    watch: true, //持续监听
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000,
        ignored: /node_modules/
    },

    performance: {
        hints: false //不显示警告
    },

    stats: "errors-only" //只在发生错误时输出
};

function getEntrys() {
    let common = {
        'common/common': './public/static/common/src/common.js',
        'meeting/application': './public/static/common/src/member/application.js'
    };

    let pcCampaignJs = getEntry('pc/campaign/js/', 'public/static/pc/js/campaign/*.js');
    let wapCampaignJs = getEntry('wap/campaign/js/', 'public/static/mobile/javascripts/campaign/*.js');

    let pcCampaignCss = getEntry('pc/campaign/css/', 'public/static/pc/sass/campaign/*.scss');
    let wapCampaignCss = getEntry('wap/campaign/css/', 'public/static/mobile/sass/campaign/*.scss');

    return {...common, ...pcCampaignJs, ...wapCampaignJs, ...pcCampaignCss, ...wapCampaignCss}
}

// 获取多页的路径
function getEntry(distPath, globPath) {
    let files = glob.sync(globPath);
    let entries = {};
    for (let i = 0; i < files.length; i++) {
        fileName = path.parse(files[i]).name;
        entries[distPath + fileName] = path.resolve(files[i])
    }
    return entries
}

module.exports = config;