这是我的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


当前回答

要添加另一个答案,flag -p(——optimize- minimal的缩写)将启用带有默认参数的UglifyJS。

您不会在一次运行中获得一个缩小的原始包,也不会生成不同名称的包,因此-p标志可能不符合您的用例。

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

我的webpack.config.js省略了devtool、debug、pathinfo和最小化插件,取而代之的是这两个标志。

其他回答

在我看来,直接使用UglifyJS工具要容易得多:

NPM install——save-dev uglify-js 正常使用webpack,例如构建一个。/dst/bundle.js文件。 在package.json中添加一个构建命令: "脚本":{ "build": "webpack && uglifyjs ./dst/bundle.js -c -m -o ./dst/bundle.min.js——source-map ./dst/bundle.min.js.map" } 当你想要构建一个你的bundle以及丑陋的代码和源代码时,运行npm run build命令。

不需要全局安装uglify-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将同时构建缩小版和非缩小版。

根据这一行: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:

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

注: 确保对于非简化版本,您将输出文件名更改为library.js,对于简化版本,则将输出文件名更改为library.min.js,以便它们不会相互覆盖。

你应该像这样导出一个数组:

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'),
];