Javascript 如何使用webpack构建小型和未压缩的捆绑包？_Javascript_Node.js_Webpack

Javascript 如何使用webpack构建小型和未压缩的捆绑包？

javascript node.js webpack

Javascript 如何使用webpack构建小型和未压缩的捆绑包？,javascript,node.js,webpack,Javascript,Node.js,Webpack,这是我的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({mini

这是我的

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创建两个配置，一个缩小代码，另一个不缩小代码（只需删除optimize.UglifyJSPlugin行）然后同时运行两个配置

$webpack&&webpack--config webpack.config.min.js

您可以使用单个配置文件，并使用环境变量有条件地包括UglifyJS插件：

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})
  ]
};

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

通常（按照惯例）用于说明特定环境是生产环境还是开发环境。要检查它，您还可以设置

constprod=（process.env.NODE_env==='production'）

，并正常继续。

要添加另一个答案，标志

-p

（缩写为

--optimize minimize

）将使用默认参数启用UglifyJS

您不会从一次运行中获得一个缩小的原始捆绑包，也不会生成不同名称的捆绑包，因此

-p

标志可能不符合您的用例

相反地，

-d

选项是

--debug

--devtool sourcemap

--output path info

My webpack.config.js省略了devtool
，debug
，pathinfo
，以及minmize插件，以支持这两个标志。
您可以使用不同的参数运行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：
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
        }
    };
}

自Webpack 4以来，Webpack.optimize.UglifyJsPlugin
已被弃用，其使用导致错误：
webpack.optimize.UglifyJsPlugin已被删除，请改用config.optimize.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一起使用，一次完成同样的事情
 也许我来晚了，但我也有同样的问题，所以我为此写了一篇文章
安装
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。不需要执行网页两次，它只是工作^^
 在我看来，直接使用该工具非常容易：
npm安装--保存开发人员丑陋的js
正常使用webpack，例如构建/dst/bundle.js
文件
将build
命令添加到您的包.json
：
"scripts": {
    "build": "webpack && uglifyjs ./dst/bundle.js -c -m -o ./dst/bundle.min.js --source-map ./dst/bundle.min.js.map"
}


无论何时，只要您想要构建一个bundle以及uglified代码和sourcemaps，都可以运行npm run build
命令
无需全局安装uglify js，只需为项目在本地安装即可
webpack entry.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 }),
    ],
};'

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

然后构建未统一的运行（在项目的主目录中）：
要构建它，请运行以下操作：
$ NODE_ENV=production webpack

注:
确保对于未统一的版本，您将输出文件名更改为library.js
，对于缩小的library.min.js
，以便它们不会相互覆盖。
根据此行：
应该是这样的：
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策略导出不同的配置，您可以拥有多个构建。
您可以在Web包配置中定义两个入口点，一个用于普通js，另一个用于缩小js。然后，您应该输出包及其名称，并配置UglifyJS插件以包含min.js文件。有关更多详细信息，请参阅示例网页包配置：
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安装
）：
我找到了解决这个问题的新方法
这使用了一系列配置来支持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
将同时生成缩小版和非缩小版。
您应该导出如下数组：
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 }),
    ],
};'

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

Node有一个“默认”变量，叫做Node_ENV。这个选项名为compress
，而不是minimize
？只是一个小问题：当你用参数调用webpack时，比如webpack-p
，webpack配置中webpack.optimize.UglifyJsPlugin的设置将被忽略（至少部分忽略）（至少忽略设置mangle:false
）。请注意，这一次只生成一个文件。因此，为了解决这个问题，应该有多个Webpack pass，Webpack&&Webpack-p
。对于阅读本文的任何人，我建议改为使用，我认为它默认与Webpack一起安装。是的，这是一个简单的解决方案，允许您只构建一次插件似乎不是