如何使用webpack构建压缩和未压缩的包?

269

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

14个回答

4

webpack entry.jsx ./output.js -p

这个命令可以正常工作,需要加上-p标志。


3

我也遇到了同样的问题,并且必须满足以下所有要求:

  • 压缩版本和非压缩版本(与问题描述相同)
  • 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

我收到了这个错误:ERROR in unknown: Invalid typeof value。 - Kushal Jain

3
您应该按如下方式导出一个数组:
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'),
];

0

在webpack配置中,您可以定义两个入口点,一个用于普通js,另一个用于压缩后的js。然后,您应该输出带有名称的捆绑包,并配置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,无需额外的插件。


弃用说明 - Jorge Olaf

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接