这是我的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能够并行地构建精简版和非精简版。这使得构建更快。不需要运行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将同时构建缩小版和非缩小版。
也许我来晚了,但我也有同样的问题,所以我为此写了一个unminifiedwebpack插件。
安装
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两次,它只是工作!^ ^
我也有同样的问题,必须满足以下所有要求:
缩小版+非缩小版(如问题所示)
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
你可以使用一个配置文件,并使用一个环境变量有条件地包含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'),然后正常继续。
根据这一行: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策略导出不同的配置,您可以拥有多个构建。