这是我的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.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'),
];

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

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

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

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

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

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

你可以使用一个配置文件,并使用一个环境变量有条件地包含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'),然后正常继续。

也许我来晚了,但我也有同样的问题,所以我为此写了一个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两次,它只是工作!^ ^