04-webpack中使用plugin

这篇具有很好参考价值的文章主要介绍了04-webpack中使用plugin。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

loader是用于特定的模块的类型转换,plugin用于执行更加广泛的任务,比如打包优化、资源管理、环境变量注入等。

CleanWebpackPlugin

用于清除之前打包的文件。npm install clean-webpack-plugin

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [
    new CleanWebpackPlugin()
]

DefinePlugin

DefinePlugin允许在编译时创建配置的全局常量,是一个webpack内置的插件(不需要单独安装)
比如:全局注册一个名为BASE_URL

const { DefinePlugin } = require('webpack');
plugins: [
    new DefinePlugin({
      BASE_URL: '"./"'
    })
]

CopyWebpackPlugin

安装:npm install copy-webpack-plugin 。接下来配置CopyWebpackPlugin即可:

  • 复制的规则在patterns中设置
  • from:设置从哪一个源中开始复制
  • to:复制到的位置,可以省略,会默认复制到打包的目录下
  • globOptions:设置一些额外的选项,其中可以编写需要忽略的文件
    • .DS_Store:mac目录下回自动生成的一个文件
    • index.html:也不需要复制,因为我们已经通过HtmlWebpackPlugin完成了index.html的生成。
new CopyWebpackPlugin({
      patterns: [
        {
          from: "public",
          globOptions: {
            ignore: [
              "**/index.html",
              "**/.DS_Store",
            ]
          }
        }
      ]
})

MiniCssExtractPlugin

MiniCssExtractPlugin可以帮助我们将css提取到一个独立的css文件中,该插件需要在webpack4+才可以使用。首先,我们需要安装 mini-css-extract-plugin:npm install mini-css-extract-plugin,然后配置rules和plugins。文章来源地址https://www.toymoban.com/news/detail-493022.html

module: {
      rules: [
        {
          test: /\.css/i,
          // style-lodader -> development
          use: [
            isProduction ? MiniCssExtractPlugin.loader: "style-loader", 
            "css-loader"],
        },
      ],
    },    
plugins: [
    // 生产环境
    new MiniCssExtractPlugin({
      filename: "css/[name].[hash:8].css"
    })
  ]

到了这里,关于04-webpack中使用plugin的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 04-webpack中使用plugin

    loader是用于特定的模块的类型转换,plugin用于执行更加广泛的任务,比如打包优化、资源管理、环境变量注入等。 CleanWebpackPlugin 用于清除之前打包的文件。npm install clean-webpack-plugin DefinePlugin DefinePlugin允许在编译时创建配置的全局常量,是一个webpack内置的插件(不需要单独安

    2024年02月09日
    浏览(41)
  • Webapck 解决:[webpack-cli] Error: Cannot find module ‘vue-loader/lib/plugin‘ 的问题

    其一、报错为: [webpack-cli] Error: Cannot find module \\\'vue-loader/lib/plugin\\\' 中文为: [webpack-cli] 错误:找不到模块“vue-loader/lib/plugin” 其二、问题描述为: 在项目打包的时候 npm run build ,控制台报错,并抛出一个 Cannot find module \\\'vue-loader/lib/plugin\\\' 的问题; 其三、控制台报错的页面显示

    2024年02月02日
    浏览(53)
  • 第3集丨webpack 江湖 —— 插件(plugin)的安装和使用

    webpack plugins 插件可以完成更多 loader 不能完成的功能。插件( plugin )的使用一般是在 webpack 的配置信息 plugins 选项中指定。 Webpack 本身内置了一些常用的插件,还可以通过 npm 安装第三方插件。 webpack-dev-server 可用于快速开发应用程序。类似于 node.js 阶段用到的 nodemon 工具,每

    2024年02月15日
    浏览(43)
  • 使用html-webpack-plugin对HTML文件进行预处理

    原文地址:https://segmentfault.com/a/1190000021518323 作者:Fw恶龙 本文首发于:思否 先整理一波之前和webpack相关的文章: 使用Webpack对CSS文件进行后处理 基于Webpack的CSS Sprites实现方案 Stylus系列——webpack-spritesmith配合stylus使用示例 继以上第三篇文章后很大程度上提高了CSS的开发效率

    2024年02月20日
    浏览(41)
  • webpack(三)loader

    loader 用于对模块的源代码进行转换,在 imporrt 或加载模块时预处理文件 webpack 做的事情,仅仅是分析出各种模块的依赖关系,然后形成资源列表,最终打包生成到指定文件中。 在 webpack 内部,任何文件都是模块,不仅仅是 js 文件 默认情况下,遇到 import 或者 require 加载模块

    2024年02月10日
    浏览(43)
  • 【webpack】自定义loader

    📝个人主页:爱吃炫迈 💌系列专栏:前端工程化 🧑‍💻座右铭:道阻且长,行则将至💗 一个loader就是一个Node.js模块,这个模块需要导出一个函数,这个导出函数的工作就是获得处理前的源内容,对源内容进行处理后,返回处理后的内容 实现一个替换文件中姓名的loade

    2024年02月13日
    浏览(40)
  • 手写webpack的loader

    帮助webpack将不同类型的文件转换为webpack可识别的模块。 pre:前置loader normal:普通loader inline:内联loader post:后置loader 4类loader的执行顺序为pernormalinlinepost 相同优先级的loader执行顺序为:从右到左,从下到上。 例如: 使用Loader 的方式 配置方式:在 webpack.config.js 文件中指定

    2024年01月21日
    浏览(39)
  • webpack中常见的Loader

    loader 用于对模块的\\\"源代码\\\"进行转换,在 import 或\\\"加载\\\"模块时预处理文件 webpack做的事情,仅仅是分析出各种模块的依赖关系,然后形成资源列表,最终打包生成到指定的文件中。如下图所示: 在webpack内部中,任何文件都是模块,不仅仅只是js文件 默认情况下,在遇到impo

    2024年02月13日
    浏览(31)
  • Cannot read properties of undefined (reading ‘styles‘),使用webpack5搭建vue项目,vue-loader报错解决

    跟着官网,尝试在webpack5中加载vue文件时报错: Cannot read properties of undefined (reading ‘styles’) 其中版本vue-loader@17.0.0,vue-template-compiler和vue都是2.7 百度之后看到有人说是vue-loader版本问题,然后在vue-loader的github的issue里找到了相关的问答: 意思是vue2的话,vue-loader版本要低于等于

    2024年01月23日
    浏览(41)
  • Webpack加载器(Loaders)的执行顺序

    在Webpack中,加载器的执行顺序是从右往左、从下往上的。为什么会选择这样的执行顺序呢?本文将介绍Webpack加载器执行顺序的原因和解释,并通过一个CSS加载器的示例来说明。 加载器的执行顺序的设计主要考虑到提供更灵活的配置和处理模块的能力。 从右往左的顺序 从右

    2024年02月11日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包