问题：生产构建任务是缩小文件，然后使用未缩小的文件覆盖文件。
上下文：我正在使用环境变量来使用其他Webpack配置文件。 npm run dev使用webpack.config.dev.js并将未缩小的文件放入/ public。 npm run dist使用webpack.config.prod.js并将缩小的文件放入/ dist。两者都需要webpack.config.common.js。
dist任务发生的时间顺序似乎有问题。它首先将缩小的文件添加到/ dist，然后将其删除以将其替换为未缩小的文件。当然，这违背了缩小它们的目的。
问题：：dist任务是否有意外运行，或者您是否看到任何可能导致此问题的东西？
我是webpack的新手，任何帮助将不胜感激。谢谢。
package.json脚本：
"scripts": {
"dev": "NODE_ENV=development webpack --config webpack.config.dev.js --mode development --watch",
"dist": "NODE_ENV=production webpack --config webpack.config.prod.js --mode production && fractal build"
},
webpack.config.common.js：
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const magicImporter = require('node-sass-magic-importer');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: { main: './assets/js/main.js'},
resolve: {
modules: [
path.resolve(__dirname, 'assets/js'),
path.resolve(__dirname, 'assets'),
path.resolve(__dirname, 'favicon.ico'),
'node_modules'
],
extensions: ['.js']
},
devtool: "inline-source-map",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env'],
babelrc: false
}
}
},
{
test: /\.(css|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader'
},
{
loader: 'resolve-url-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
importer: magicImporter(),
sourceMap: true
}
}
]
}
},
plugins: [
new MiniCssExtractPlugin({
filename: 'assets/css/main.css'
}),
new CopyWebpackPlugin([
{
from: 'assets/img/**/*',
to: 'assets/img/',
flatten: true
},
{
from: 'assets/video/**/*',
to: 'assets/video/',
flatten: true
},
{
from: 'assets/webvtt/**/*',
to: 'assets/webvtt/',
flatten: true
},
{
from: 'favicon.ico',
to: ''
},
{
from: '*.png',
to: ''
}
])
]
};
webpack.config.dev.js：
const webpack = require('webpack');
const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.config.common.js');
module.exports = merge(common, {
mode: 'development',
output: {
path: path.resolve(__dirname, 'public/'),
publicPath: '/',
filename: 'assets/js/main.js'
}
});
webpack.config.prod.js：
const webpack = require('webpack');
const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.config.common.js');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = merge(common, {
mode: 'production',
output: {
path: path.resolve(__dirname, 'dist/'),
publicPath: '/',
filename: 'assets/js/main.js'
},
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: false,
parallel: true,
sourceMap: false,
uglifyOptions: {
warnings: false,
parse: {},
compress: {},
mangle: true,
output: null,
toplevel: false,
nameCache: null,
ie8: false,
keep_fnames: false
},
extractComments: {
condition: /^\**!|@preserve|@license|@cc_on/i,
filename: 'assets/js/extracted-comments.js'
}
}),
new OptimizeCSSAssetsPlugin({})
]
}
});
答案 0 :(得分：0)
我能够通过将所有Webpack配置重新组合回webpack.config.js并使用条件检查环境来推动优化的条件来解决此问题，而不是使用其他配置。
我认为问题在于将fractal build任务附加到了dist任务中。我认为webpack正确地缩小了文件，然后分形在此之后将它们缩小了。我不确定为什么合并文件可以解决问题（我的dist任务仍然附加了fractal build），但我很高兴它现在可以按预期的方式工作。
更新的package.json脚本：
"scripts": {
"dev": "NODE_ENV=development webpack --mode development --watch",
"dist": "NODE_ENV=production webpack --mode production && fractal build"
},
更新了webpack.config.js：
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const magicImporter = require('node-sass-magic-importer');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
mode: process.env.NODE_ENV,
entry: { main: './assets/js/main.js'},
output: {
path: path.resolve(__dirname, 'public/'),
publicPath: '/',
filename: 'assets/js/main.js'
},
devtool: "inline-source-map",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env'],
babelrc: false
}
}
},
{
test: /\.(css|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader'
},
{
loader: 'resolve-url-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
importer: magicImporter(),
sourceMap: true
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'assets/css/main.css'
}),
new CopyWebpackPlugin([
{
from: 'assets/img/**/*',
to: 'assets/img/',
flatten: true
},
{
from: 'assets/video/**/*',
to: 'assets/video/',
flatten: true
},
{
from: 'assets/webvtt/**/*',
to: 'assets/webvtt/',
flatten: true
},
{
from: 'favicon.ico',
to: ''
},
{
from: '*.png',
to: ''
}
])
],
optimization: {
minimizer: []
}
};
if (process.env.NODE_ENV === 'production') {
module.exports.optimization.minimizer.push(
new UglifyJsPlugin({
cache: false,
parallel: true,
sourceMap: false,
uglifyOptions: {
warnings: false,
parse: {},
compress: {},
mangle: true,
output: null,
toplevel: false,
nameCache: null,
ie8: false,
keep_fnames: false
},
extractComments: {
condition: /^\**!|@preserve|@license|@cc_on/i,
filename: 'assets/js/extracted-comments.js'
}
}),
new OptimizeCSSAssetsPlugin({})
);
}
作为参考，此行始终位于fractal.js中：
fractal.web.set('builder.dest', __dirname + '/dist');