zoukankan      html  css  js  c++  java
  • 初探webpack4--常用插件使用

    1、压缩CSS以及优化CSS结构(optimize-css-assets-webpack-plugin)
      处理效果:
        将CSS压缩
          optimize-css-assets-webpack-plugin
        安装(下载)
          npm install --save-dev optimize-css-assets-webpack-plugin
        配置config文件
        引入插件
          OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
        配置plugin
          new OptimizeCssAssetsWebpackPlugin({
            assetNameRegExp: /.css$/, 正则表达式匹配需要优化或者压缩的资源名
            cssProcessor: 用于压缩和优化CSS的处理器, 默认 cssnano
            cssProcessorPluginOptions: { 传递cssProcessor的插件选项,{}
              preset: ['default', {discardComments: {removeAll: true}}]
            }
            canPrint: 表示插件能够在console中打印信息
          })
    2、运用webpack插件拷贝静态文件(copy-webpack-plugin)
      安装(下载)
        npm install --save-dev copy-webpack-plugin
      配置config文件
      引入插件
        const CopyWebpackPlugin = require('copy-webpack-plugin')
      配置Plugin配置:
      plugins: [
        new CopyWebpackPlugin([
          {
            from: __dirname + 'status',
            to: __dirname + /build/status
          }
        ])
      ]
    3、webpack插件之clean-webpack-plugin清除文件
      处理效果:
        当我们修改带hash的文件并进行打包时,每打包一次就会生成新的文件,而旧的文件并没有删除为了解决这种情况,我们可以使用clean-webpack-plugin在打包之前将文件先清除,之后再打包出新的文件
      安装(下载)
        npm install --save-dev clean-webpack-plugin

      配置config文件
        引入插件:
          const CleanWebpackPlugin = require('clean-webpack-plugin')
        Plugin配置
          Plugins: [
            new CleanWebpackPlugin(['build'])
          ]
    4、webpack处理HTML内嵌图片
      处理效果
        未使用loader,会出现路径错误,图片不显示
        经过loader处理才能正常显示
        安装(下载)
          npm install -save-dev html-loader
        配置config文件
        Rules配置
          module:{
            rules: [
              {
                test: '/.html/',
                use: {
                  loader: 'html-loader',
                  options: {
                    attrs: ['img:src', 'img:data-src']
                  }
                }
              }
            ]
          }

  • 相关阅读:
    用鼠标滚轮做事件
    0927 匿名函数,隐藏显示层
    好友选中
    bzoj:1687;poj 2434:[Usaco2005 Open]Navigating the City 城市交通
    bzoj:1659: [Usaco2006 Mar]Lights Out 关灯
    bzoj:3392: [Usaco2005 Feb]Part Acquisition 交易
    bzoj:1723: [Usaco2009 Feb]The Leprechaun 寻宝
    poj 2434;bzoj 1686 [Usaco2005 Open]Waves 波纹
    bzoj:3397 [Usaco2009 Feb]Surround the Islands 环岛篱笆
    bzoj:3400 [Usaco2009 Mar]Cow Frisbee Team 奶牛沙盘队
  • 原文地址:https://www.cnblogs.com/webtaotao/p/12108145.html
Copyright © 2011-2022 走看看