这是我的 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
您可以使用单个配置文件,并使用环境变量有条件地包含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')
并正常继续.
您可以使用不同的参数运行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()); } ...
示例webpack.config.js
也许我迟到了,但我有同样的问题,所以我为此目的写了一个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两次,它只是工作!^^
要添加另一个答案,标志-p
(简称--optimize-minimize
)将使UglifyJS具有默认参数.
您不会从单次运行中获得缩小的原始包或生成不同名称的包,因此该-p
标志可能不符合您的用例.
相反,该-d
选项很短--debug
--devtool sourcemap
--output-pathinfo
我webpack.config.js省略了devtool
,debug
,pathinfo
,并有利于这两个标志的minmize插件.
在我看来,这是一个很多更容易只是使用UglifyJS直接的工具:
npm install --save-dev uglify-js
正常使用webpack,例如构建./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" }
无论何时想要构建捆绑包以及uglified代码和源映射,请运行该npm run build
命令.
无需全局安装uglify-js,只需在本地为项目安装即可.
您可以为webpack创建两个配置,一个缩小代码,一个不缩放(只删除optimize.UglifyJSPlugin行),然后同时运行两个配置 $ webpack && webpack --config webpack.config.min.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一起使用,并在一次通过中执行相同的操作.
根据这一行: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策略,您可以通过导出不同的配置来实现多个构建.