这是我的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,不需要额外的插件。

其他回答

你可以在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,不需要额外的插件。

你可以为webpack创建两个配置,一个可以减少代码,另一个则不能(只需删除优化)。然后同时运行两个配置$ webpack && webpack——config webpack.config.min.js

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

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

你可以这样格式化你的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,以便它们不会相互覆盖。