这是我的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
我也有同样的问题,必须满足以下所有要求:
缩小版+非缩小版(如问题所示)
ES6
跨平台(Windows + Linux)。
我最终解决如下:
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
根据这一行: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.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代替
正如手册解释的那样,插件可以用最小化选项代替。自定义配置可以通过指定UglifyJsPlugin实例提供给插件:
const webpack = require("webpack");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
// ...
optimization: {
minimize: true,
minimizer: [new UglifyJsPlugin({
include: /\.min\.js$/
})]
}
};
这是一个简单的设置。一个更有效的解决方案是同时使用Gulp和Webpack,一次完成同样的事情。
你可以在webpack配置中定义两个入口点,一个用于普通js,另一个用于迷你js。然后你应该输出你的bundle和它的名字,并配置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,不需要额外的插件。
你可以使用一个配置文件,并使用一个环境变量有条件地包含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'),然后正常继续。