如何建立缩小和未压缩的捆绑与webpack?

你可以为webpack创建两个配置，一个可以减少代码，另一个则不能(只需删除优化)。UglifyJSPlugin line)，然后同时运行这两个配置$ webpack && webpack --config webpack.config.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')，并正常继续。

要添加另一个答案，标记-p (--optimize-minimize的简称)将启用带有默认参数的UglifyJS。

你不会从一次运行中得到一个缩小的和原始的包，也不会生成不同名称的包，所以-p标志可能不符合你的用例。

相反，-d选项是--debug --devtool sourcemap --output-pathinfo的缩写

我的webpack.config.js省略了devtool， debug， pathinfo和最小化插件，以支持这两个标志。

你可以用不同的参数运行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

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，一次完成同样的事情。

也许我在这里晚了，但我有同样的问题，所以我写了一个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工具更容易很多:

1. npm install --save-dev uglify-js
2. 正常使用webpack，例如构建./dst/bundle.js文件。
3. 在你的package.json中添加build命令:

   "scripts": {
   "build": "webpack && uglifyjs ./dst/bundle.js -c -m -o ./dst/bundle.min.js --source-map ./dst/bundle.min.js.map"
   }
   

4. Whenever you want to build a your bundle as well as uglified code and sourcemaps, run the npm run build command.

No need to install uglify-js globally, just install it locally for the project.

webpack条目。JSX ./output.js -p

工作为我，与-p标志。

你可以这样格式化你的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

根据这一行: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配置中定义两个入口点，一个用于普通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，不需要额外的插件。

我也有同样的问题，必须满足以下所有要求:

• 缩小版+非缩小版(如问题所示)
• 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

我找到了解决这个问题的新方法。

这使用了一个配置数组，使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'),
];