溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

webpack同時(shí)輸出壓縮和未壓縮的文件的實(shí)現(xiàn)方法

發(fā)布時(shí)間：2020-07-18 14:17:06 來源：億速云 閱讀：258 作者：小豬 欄目：web開發(fā)

這篇文章主要講解了webpack同時(shí)輸出壓縮和未壓縮的文件的實(shí)現(xiàn)方法，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

有的時(shí)候我們想要同時(shí)生成壓縮和未壓縮的文件，比如我們構(gòu)建 lib 包的時(shí)候，我們希望用戶能夠使用壓縮過后的代碼文件作為 cdn 文件，最簡(jiǎn)單的一個(gè)方式就是通過指定環(huán)境變量，比如指定 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

我們?cè)谑褂玫臅r(shí)候通過指定環(huán)境變量就可以打包成不同的版本：

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

不過這樣的缺點(diǎn)就是我們需要運(yùn)行兩次。

第二個(gè)方法是安裝unminified-webpack-plugin，通過這個(gè)插件可以生成沒有壓縮的文件：

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

不過這個(gè)有個(gè)缺點(diǎn)就是未壓縮的文件沒有 sourcemap。

第三種方法通過指定多個(gè)打包入口，然后手動(dòng)指定壓縮插件（uglifyjs、terser等）壓縮哪些文件，如我們指定 index.min.js 這個(gè)文件才需要壓縮，配置如下：

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

關(guān)鍵點(diǎn)如下：

webpack同時(shí)輸出壓縮和未壓縮的文件的實(shí)現(xiàn)方法

這個(gè)時(shí)候生成的就完美了。

看完上述內(nèi)容，是不是對(duì)webpack同時(shí)輸出壓縮和未壓縮的文件的實(shí)現(xiàn)方法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手