这是我的
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.js
bundle.min.js.map
我也想看未压缩的
bundle.js
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 一起使用,一次性完成相同的事情。
您可以使用单个配置文件,并使用环境变量有条件地包含 UglifyJS 插件:
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
const 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'
},
optimization: {
minimize: PROD,
minimizer: [
new TerserPlugin({ parallel: true })
]
};
然后当你想缩小它时设置这个变量:
$ PROD_ENV=1 webpack
编辑:
正如评论中提到的,
NODE_ENV
通常(按照惯例)用于说明特定环境是生产环境还是开发环境。要检查它,您也可以设置const PROD = (process.env.NODE_ENV === 'production')
,然后正常继续。
您可以使用不同的参数运行 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,只需在项目本地安装即可。
您可以为 webpack 创建两个配置,一个可以缩小代码,另一个则不能(只需删除 optimize.UglifyJSPlugin 行),然后同时运行这两个配置
$ webpack && webpack --config webpack.config.min.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 策略导出不同的配置来进行多个构建。
我找到了解决这个问题的新方法。
这使用一系列配置来使 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
将同时构建缩小版本和非缩小版本。
您可以像这样格式化您的 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 entry.jsx ./output.js -p
对我有用,带有
-p
标志。
我有同样的问题,并且必须满足所有这些要求:
我最终解决如下:
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
您应该导出这样的数组:
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,无需额外的插件。