웹 팩 은 압축 되 지 않 은 파일 과 압축 되 지 않 은 파일 을 동시에 출력 하 는 방법

때때로 우 리 는 압축 과 압축 되 지 않 은 파일 을 동시에 생 성 하려 고 합 니 다.예 를 들 어 우리 가 lib 패 키 지 를 구축 할 때 우 리 는 사용자 가 압축 된 코드 파일 을 cdn 파일 로 사용 할 수 있 기 를 바 랍 니 다.가장 간단 한 방법 은 환경 변 수 를 지정 하 는 것 입 니 다.예 를 들 어 MINIFY 를 지정 하 는 것 입 니 다.다음 과 같 습 니 다.

const path = require('path')

const isMinify = process.env.MINIFY

/**
 * @type {import('webpack').Configuration}
 */
const config = {
 entry: {

  index: './src/index.js'
 },
 output: {
  filename: isMinify ? '[name].min.js' : '[name].js',
  path: path.join(__dirname, 'dist')
 },
 devtool: 'cheap-source-map',
 optimization: {
  minimize: isMinify ? true : false
 }
}

module.exports = config

사용 할 때 환경 변 수 를 지정 하면 다른 버 전 으로 포장 할 수 있 습 니 다.

 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build:min": "MINIFY=1 webpack --config=webpack.config.js",
  "build": "webpack --config=webpack.config.js"
 }

그러나 이런 단점 은 우리 가 두 번 운행 해 야 한 다 는 것 이다.
두 번 째 방법 은 설치unminified-webpack-plugin입 니 다.이 플러그 인 을 통 해 압축 되 지 않 은 파일 을 만 들 수 있 습 니 다.

const path = require('path')
const UnminifiedWebpackPlugin = require('unminified-webpack-plugin');

/**
 * @type {import('webpack').Configuration}
 */
const config = {
 entry: {
  index: './src/index.js',
 },
 output: {
  filename: '[name].min.js',
  path: path.join(__dirname, 'dist')
 },
 devtool: 'cheap-source-map',
 plugins: [
  new UnminifiedWebpackPlugin({})
 ]
}

module.exports = config

하지만 이 단점 은 압축 되 지 않 은 파일 에 sourcemap 이 없다 는 것 이다.
세 번 째 방법 은 여러 개의 포장 입 구 를 지정 한 다음 에 압축 플러그 인(uglifyjs,terser 등)을 수 동 으로 지정 하여 어떤 파일 을 압축 해 야 합 니까?예 를 들 어 우리 가 지정 한index.min.js이 파일 을 압축 해 야 합 니까?설정 은 다음 과 같 습 니 다.

const path = require('path')
const TerserWebpackPlugin = require('terser-webpack-plugin');

/**
 * @type {import('webpack').Configuration}
 */
const config = {
 entry: {
  index: './src/index.js',
  'index.min': './src/index.js'
 },
 output: {
  filename: '[name].js',
  path: path.join(__dirname, 'dist')
 },
 devtool: 'cheap-source-map',
 optimization: {
  minimize: true,
  minimizer: [
   new TerserWebpackPlugin({
    include: /min/,
    sourceMap: true
   })
  ]
 }
}

module.exports = config

관건 은 다음 과 같다.

이 럴 때 생 긴 건 완벽 해.
웹 팩 이 압축 되 지 않 은 파일 과 압축 되 지 않 은 파일 을 동시에 출력 하 는 방법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 웹 팩 이 압축 되 지 않 은 파일 내용 을 동시에 출력 하 는 방법 에 대해 서 는 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 을 바 랍 니 다!