【前端】webpack使用记录

阅读数: 2023-04-28

官方文档

v5: https://webpack.docschina.org/concepts/

v4：https://v4.webpack.docschina.org/concepts/

v3-: https://stackoverflow.com/questions/49152770/where-can-i-find-the-documentation-for-webpack-3

devServer的Host IP

通常我们设置devServer的host为0.0.0.0或者::,这时候运行后还需要在浏览器输入对于ip去访问属实麻烦，因此通过chalk把ip打印到终端上，实现如下

// const os = require('os') // node 14
const address = require('address') // 1.1.2
const defaultGateway = require('default-gateway') // 6.0.3
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') // 1.7.0
const portfinder = require('portfinder') // 1.0.28

// 获取内网ip
function getIPAddress() {
  // let IPAddress = ''
  // const interfaces = os.networkInterfaces()
  // for (const devName in interfaces) {
  //   const iface = interfaces[devName]
  //   for (let i = 0; i < iface.length; i++) {
  //     const alias = iface[i]
  //     if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
  //       IPAddress = alias.address
  //     }
  //   }
  //   if (devName === '以太网' || devName === 'eth0' || devName === 'LAN') break
  // }
  // return IPAddress

  let IPAddress
  try {
    // This can only return an IPv4 address
    const result = defaultGateway.v4.sync()
    IPAddress = address.ip(result && result.interface)
    if (IPAddress) {
      // Check if the address is a private ip
      // https://en.wikipedia.org/wiki/Private_network#Private_IPv4_address_spaces
      if (
        /^10[.]|^172[.](1[6-9]|2[0-9]|3[0-1])[.]|^192[.]168[.]/.test(IPAddress)
      ) {
        // Address is private, format it for later use
      } else {
        // Address is not private, so we will discard it
        IPAddress = ''
      }
    }
  } catch (_e) {
    IPAddress = ''
  }
  return IPAddress
}


devWebpackConfig = {
    ...
}

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = '3000'
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port
      process.env.PORT = port
      // add port to devServer config
      devWebpackConfig.devServer.port = port

      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [
            'Your application is running here:',
            `- Local:   http://localhost:${port}`,
            IPAddress ? `- Network: http://${IPAddress}:${port}` : ''
          ]
        }
      }))

      resolve(devWebpackConfig)
    }
  })
})

参考：nodejs交互工具库 – strip-ansi, address, default-gateway和joi

自定义插件

从远程复制文件放入指定位置（可以作为子模块构建的方式，如此不需要每次都要同时构建主模块和子模块）

/**
 * webpack3写法
 */
const path = require('path')
const fs = require('fs')
const download = require('download')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

function addFileToAssets (filename, compilation) {
  const outputPath = compilation.compiler.options.output.path
  const absPath = path.resolve(outputPath, filename)
  return Promise.all([fs.statAsync(absPath), fs.readFileAsync(absPath)])
    .then(results => {
      compilation.assets[filename] = {
        source: _ => results[1],
        size: _ => results[0].size
      }
      compilation.fileDependencies.push(filename)
    })
}

// 从远程获取文件注入assets
function CopyRemoteUrlPlugin(patterns = [], options = {}) {
  if (!Array.isArray(patterns)) {
    throw new Error('CopyRemoteUrlPlugin: patterns must be an array')
  }

  const apply = function apply(compiler) {
    const outputPath = compiler.options.output.path

    compiler.plugin('emit', (compilation, cb) => {
      Promise.all(patterns.map(pattern => {
        const sourceUrl = encodeURI(pattern.from)
        const destDir = path.join(outputPath, pattern.to)
        const patternOpt = Object.assign(options, pattern.options)
        return download(sourceUrl, destDir, patternOpt).then(files => {
          files = files.filter(item => (item.type === 'file'))
          files.forEach(file => (file.pattern = pattern))
          return files
        })
      })).then(files => {
        files = files.flat()
        return Promise.all(files.map(item => {
          const filename = path.join(item.pattern.to, item.path)
          return addFileToAssets(filename, compilation)
        }))
      }).catch(err => {
        compilation.errors.push(err)
      }).finally(cb)
    })
  }

  return { apply }
}

module.exports = {
  CopyRemoteUrlPlugin
}


// 使用
const {CopyRemoteUrlPlugin} = require('./extraWebpackPlugin.js')
plugins: [
     ...
     new CopyRemoteUrlPlugin([{
        from: config.build.appZipRemoteUrl,
        to: 'app',
        options: {
          extract: true,
          filter: file => path.extname(file.path) !== '.map'
        }
     }])
     ...
]

删除注释

html注释

const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const CssNano = require('cssnano')

{
    module: {
    	rules: [
            {
                // require html的注释删除
                test: /\.html$/,
                use: [{
                    loader: 'html-loader',
                    options: {
                        minimize: true
                    }
                }]
            },
        ]
    },
    plugins: [
        // html注释
        // more: https://github.com/kangax/html-minifier#options-quick-reference
        new HtmlWebpackPlugin({
		 ...
          minify: {
            removeComments: true
          }
        }),
        // js注释
        new UglifyJsPlugin({
          ...
          uglifyOptions: {
            output: {
              comments: false
            }
          }
        }),
        // css注释
        // more: https://github.com/NMFR/optimize-css-assets-webpack-plugin/tree/v3.2.0
        new OptimizeCSSPlugin({
          cssProcessor: CssNano,
          cssProcessorOptions: {
            safe: true,
            discardComments: { removeAll: true }
          },
          canPrint: true
        })
    ]
}

遇到问题记录

cheerio打包js里面存在package.json

这里是使用juice遇到的，打包里面存在cheerio的package.json内容，如下图

导致原因如下

/**
 * Export cheerio (with )
 */

exports = module.exports = require('./lib/cheerio');

/*
  Export the version
*/

exports.version = require('./package.json').version;

暂时没有想到太好的方法，只能先固定写死version

1	exports.version = "1.0.0";

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/52be6147.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！