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

其他回答

要添加另一个答案,flag -p(——optimize- minimal的缩写)将启用带有默认参数的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配置中定义两个入口点,一个用于普通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,不需要额外的插件。

根据这一行: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止损。jsx,输出

适用于我,使用-p标志。