webpack 如何同時輸出壓縮和未壓縮的文件

有的時候咱們想要同時生成壓縮和未壓縮的文件，好比咱們構建 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

複製代碼

關鍵點以下：

這個時候生成的就完美了。

最後是一個廣告貼，最近新開了一個分享技術的公衆號，歡迎你們關注👇

本篇文章由一文多發平臺ArtiPub自動發佈