这是我的 webpack.config.js
var webpack = require("webpack");
module.exports = {
entry: "./entry.js",
devtool: "source-map",
output: {
path: "./dist",
filename: "bundle.min.js"
},
plugins: [
new webpack.optimize.UglifyJsPlugin({minimize: true})
]
};我正在与
$ webpack在我的dist文件夹中，我只会
bundle.min.jsbundle.min.js.map我也想看看未压缩的 bundle.js
Answers:
webpack.config.js：
const webpack = require("webpack");
module.exports = {
entry: {
"bundle": "./entry.js",
"bundle.min": "./entry.js",
},
devtool: "source-map",
output: {
path: "./dist",
filename: "[name].js"
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
include: /\.min\.js$/,
minimize: true
})
]
};自从Webpack 4 webpack.optimize.UglifyJsPlugin被弃用以来，其使用导致错误：
webpack.optimize.UglifyJsPlugin已被删除，请改用config.optimization.minimize
如手册所述，可以使用minimize选项替换插件。通过指定UglifyJsPlugin实例，可以向插件提供自定义配置：
const webpack = require("webpack");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
// ...
optimization: {
minimize: true,
minimizer: [new UglifyJsPlugin({
include: /\.min\.js$/
})]
}
};这样就可以完成简单的设置。一种更有效的解决方案是将Gulp与Webpack一起使用，并且一次完成相同的操作。
Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
您可以使用一个配置文件，并使用环境变量有条件地包括UglifyJS插件：
var webpack = require('webpack');
var PROD = JSON.parse(process.env.PROD_ENV || '0');
module.exports = {
entry: './entry.js',
devtool: 'source-map',
output: {
path: './dist',
filename: PROD ? 'bundle.min.js' : 'bundle.js'
},
plugins: PROD ? [
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false }
})
] : []
};然后在要缩小它时设置此变量：
$ PROD_ENV=1 webpack
编辑：
如评论中所述，NODE_ENV通常用于（按惯例）指出特定环境是生产环境还是开发环境。要检查它，您还可以设置var PROD = (process.env.NODE_ENV === 'production')，然后继续正常进行。
compress，而不是minimize？
webpack -p的设置将被（至少部分）忽略（至少会忽略设置）。mangle: false
webpack && webpack -p。
definePlugin此书的任何人，我建议您改用它，我认为Webpack默认安装了该工具。
您可以使用不同的参数两次运行webpack：
$ webpack --minimize然后在中检查命令行参数webpack.config.js：
var path = require('path'),
webpack = require('webpack'),
minimize = process.argv.indexOf('--minimize') !== -1,
plugins = [];
if (minimize) {
plugins.push(new webpack.optimize.UglifyJsPlugin());
}
...要添加其他答案，该标志-p（--optimize-minimize）将启用带有默认参数的UglifyJS。
您不会一次运行就得到一个缩小的原始捆绑包，-p也不会生成名称不同的捆绑包，因此该标志可能无法满足您的用例。
相反，该-d选项是以下简称--debug --devtool sourcemap --output-pathinfo
我webpack.config.js省略了devtool，debug，pathinfo，和minmize赞成这两个标志的插件。
也许我来晚了，但是我遇到了同样的问题，所以我写了一个unminified-webpack-plugin为此目的。
安装
npm install --save-dev unminified-webpack-plugin用法
var path = require('path');
var webpack = require('webpack');
var UnminifiedWebpackPlugin = require('unminified-webpack-plugin');
module.exports = {
entry: {
index: './src/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'library.min.js'
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new UnminifiedWebpackPlugin()
]
};通过上述操作，您将获得两个文件library.min.js和library.js。无需执行webpack两次，就可以了！^^
在我看来，这是一个很多更容易只是使用UglifyJS直接的工具：
npm install --save-dev uglify-js ./dst/bundle.js文件。将build命令添加到您的package.json：
"scripts": {
"build": "webpack && uglifyjs ./dst/bundle.js -c -m -o ./dst/bundle.min.js --source-map ./dst/bundle.min.js.map"
}npm run build命令。无需全局安装uglify-js，只需在项目本地安装即可。
根据这一行： https //github.com/pingyuanChen/webpack-uglify-js-plugin/blob/master/index.js#L117
应该是这样的：
var webpack = require("webpack");
module.exports = {
entry: "./entry.js",
devtool: "source-map",
output: {
path: "./dist",
filename: "bundle.js"
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
minimize: true,
compress: false
})
]
};实际上，您可以通过根据您的env / argv策略导出不同的配置来进行多种构建。
minimize在文档中找不到选项。也许不推荐使用？
您可以像这样格式化webpack.config.js：
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
module.exports = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : null,
entry: "./entry.js",
output: {
path: __dirname + "/dist",
filename: "library.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};'然后以最小化的方式构建它（在项目的主目录中）：
$ webpack要构建它最小化运行：
$ NODE_ENV=production webpack注意：确保对于未压缩版本，请将输出文件名更改为，将未压缩版本更改library.js为library.min.js未覆盖。
我遇到了同样的问题，必须满足所有这些要求：
我终于解决了如下问题：
webpack.config.js：
const path = require('path');
const MinifyPlugin = require("babel-minify-webpack-plugin");
module.exports = getConfiguration;
function getConfiguration(env) {
var outFile;
var plugins = [];
if (env === 'prod') {
outFile = 'mylib.dev';
plugins.push(new MinifyPlugin());
} else {
if (env !== 'dev') {
console.log('Unknown env ' + env + '. Defaults to dev');
}
outFile = 'mylib.dev.debug';
}
var entry = {};
entry[outFile] = './src/mylib-entry.js';
return {
entry: entry,
plugins: plugins,
output: {
filename: '[name].js',
path: __dirname
}
};
}package.json：
{
"name": "mylib.js",
...
"scripts": {
"build": "npm-run-all webpack-prod webpack-dev",
"webpack-prod": "npx webpack --env=prod",
"webpack-dev": "npx webpack --env=dev"
},
"devDependencies": {
...
"babel-minify-webpack-plugin": "^0.2.0",
"npm-run-all": "^4.1.2",
"webpack": "^3.10.0"
}
}然后，我可以通过构建（不要忘了npm install之前）：
npm run-script build我找到了解决该问题的新方法。
这使用配置数组来使webpack并行构建缩小版本和非缩小版本。这使构建速度更快。无需运行webpack两次。不需要额外的插件。只是webpack。
webpack.config.js
const devConfig = {
mode: 'development',
entry: { bundle: './src/entry.js' },
output: { filename: '[name].js' },
module: { ... },
resolve: { ... },
plugins: { ... }
};
const prodConfig = {
...devConfig,
mode: 'production',
output: { filename: '[name].min.js' }
};
module.exports = (env) => {
switch (env) {
case 'production':
return [devConfig, prodConfig];
default:
return devConfig;
}
};运行webpack将仅生成未缩小的版本。
运行webpack --env=production将同时生成缩小版和非缩小版。
您应该这样导出一个数组：
const path = require('path');
const webpack = require('webpack');
const libName = 'YourLibraryName';
function getConfig(env) {
const config = {
mode: env,
output: {
path: path.resolve('dist'),
library: libName,
libraryTarget: 'umd',
filename: env === 'production' ? `${libName}.min.js` : `${libName}.js`
},
target: 'web',
.... your shared options ...
};
return config;
}
module.exports = [
getConfig('development'),
getConfig('production'),
];您可以在webpack配置中定义两个入口点，一个用于普通js，另一个用于缩小js。然后，应输出包含其名称的包，并配置UglifyJS插件以包含min.js文件。请参阅示例Webpack配置以获取更多详细信息：
module.exports = {
entry: {
'bundle': './src/index.js',
'bundle.min': './src/index.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: "[name].js"
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
include: /\.min\.js$/,
minimize: true
})
]
};运行webpack之后，您将在dist文件夹中获得bundle.js和bundle.min.js，无需额外的插件。