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