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({minimize: true})
  ]
};

나는 건물

$ webpack

내 dist폴더에는

• bundle.min.js
• bundle.min.js.map

나는 또한 압축되지 않은 것을보고 싶습니다 bundle.js

webpack.config.js :

const webpack = require("webpack");

module.exports = {
  entry: {
    "bundle": "./entry.js",
    "bundle.min": "./entry.js",
  },
  devtool: "source-map",
  output: {
    path: "./dist",
    filename: "[name].js"
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      include: /\.min\.js$/,
      minimize: true
    })
  ]
};

Webpack 4부터는 webpack.optimize.UglifyJsPlugin더 이상 사용되지 않으며 사용으로 인해 오류가 발생합니다.

webpack.optimize.UglifyJsPlugin이 제거되었습니다. 대신 config.optimization.minimize를 사용하십시오.

설명서에 설명 된 대로 플러그인을 minimize옵션 으로 교체 할 수 있습니다 . UglifyJsPlugin인스턴스 를 지정하여 플러그인에 사용자 정의 구성을 제공 할 수 있습니다 .

const webpack = require("webpack");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [new UglifyJsPlugin({
      include: /\.min\.js$/
    })]
  }
};

이것은 간단한 설정 작업을 수행합니다. 보다 효과적인 해결책은 Webpack과 함께 Gulp를 사용하고 한 번에 동일한 작업을 수행하는 것입니다.

단일 구성 파일을 사용하고 환경 변수를 사용하여 조건부로 UglifyJS 플러그인을 포함 할 수 있습니다.

var webpack = require('webpack');

var 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'
  },
  plugins: PROD ? [
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false }
    })
  ] : []
};

그리고이 변수를 축소하려는 경우이 변수를 설정하십시오.

$ PROD_ENV=1 webpack

편집하다:

의견에서 언급했듯이, NODE_ENV일반적으로 특정 환경이 프로덕션 환경인지 개발 환경인지를 나타내는 데 사용됩니다 (일반적으로). 이를 확인하기 위해을 설정 var PROD = (process.env.NODE_ENV === 'production')하고 정상적으로 계속할 수도 있습니다 .

다른 인수로 웹팩을 두 번 실행할 수 있습니다.

$ 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

다른 답변을 추가하기 위해 플래그 -p( --optimize-minimize)가 기본 인수로 UglifyJS를 활성화합니다.

단일 실행에서 축소 된 원시 번들을 얻거나 다른 이름의 번들을 생성 -p하지 않으므로 플래그가 사용 사례에 맞지 않을 수 있습니다.

반대로 -d옵션은 짧습니다--debug --devtool sourcemap --output-pathinfo

내 webpack.config.js의 생략합니다 devtool, debug, pathinfo,이 두 플래그에 찬성 플러그인 minmize.

어쩌면 나는 여기에 늦었지만 같은 문제가 있으므로이 목적 으로 축소되지 않은 webpack-plugin 을 작성했습니다.

설치

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을 두 번 실행할 필요가 없습니다. ^^

제 생각 에는 UglifyJS 도구를 직접 사용하는 것이 훨씬 쉽습니다 .

1. npm install --save-dev uglify-js
2. ./dst/bundle.js파일 빌드와 같이 웹팩을 정상적으로 사용하십시오 .

3. 에 build명령을 추가 하십시오 package.json:

   "scripts": {
       "build": "webpack && uglifyjs ./dst/bundle.js -c -m -o ./dst/bundle.min.js --source-map ./dst/bundle.min.js.map"
   }

4. 번들 된 코드와 소스 코드 및 소스 맵을 빌드 할 때마다 npm run build명령을 실행하십시오 .

uglify-js를 전역 적으로 설치할 필요가 없으며 프로젝트를 위해 로컬로 설치하십시오.

웹팩에 대한 두 가지 구성을 만들 수 있습니다. 하나는 코드를 축소하고 다른 하나는 최적화하지 않습니다 (optimize.UglifyJSPlugin 행 제거). 두 구성을 동시에 실행 $ webpack && webpack --config webpack.config.min.js

이 라인에 따르면 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 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 }),
    ],
};'

그런 다음 프로젝트의 기본 디렉토리에있는 동안 축소되지 않은 실행을 빌드하십시오.

$ webpack

축소 실행을 빌드하려면 다음을 수행하십시오.

$ NODE_ENV=production webpack

참고 : 최소화되지 않은 버전의 경우 출력 파일 이름을 변경하고 서로 library.js축소 library.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 install앞에 잊지 마십시오 ) :

npm run-script build

이 문제에 대한 새로운 해결책을 찾았습니다.

이것은 일련의 구성을 사용하여 웹팩이 축소 및 축소되지 않은 버전을 병렬로 빌드 할 수있게합니다. 이렇게하면 빌드가 더 빨라집니다. 웹팩을 두 번 실행할 필요가 없습니다. 추가 플러그인이 필요하지 않습니다. 그냥 웹팩.

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하면 축소 및 축소되지 않은 버전이 동시에 빌드됩니다.

다음과 같이 배열을 내 보내야합니다.

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

웹팩 구성에서 두 개의 진입 점을 정의 할 수 있습니다. 하나는 일반 js이고 다른 하나는 축소 된 js입니다. 그런 다음 번들 이름을 출력하고 min.js 파일을 포함하도록 UglifyJS 플러그인을 구성해야합니다. 자세한 내용은 예제 웹팩 구성을 참조하십시오.

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

웹팩을 실행하면 추가 플러그인없이 dist 폴더에 bundle.js 및 bundle.min.js를 얻을 수 있습니다.