zoukankan      html  css  js  c++  java
  • 02-plugins

    plugin 可以在webpack运行到某个阶段的时候,帮你做一些事情,类似于生命周期的概念。
     
    在之前我们使用loader的时候,我们打包后还需要自己手动在打包后的文件夹中创建一个index.html文件,并且这个文件中引入打包后的js,非常麻烦,所以就有了下面这个插件。
     
    一、HtmlWebpackPlugin
     
    使用:
    1)在webpack.config.js中引入

     2)设置标题需要在自己的html模板中的title中写入ejs的语法

    loader都是放在module对象中的,与module平级的是plugins,放入各种插件,下面是htmlWebpackPlugin插件配置

     

     还有一些相关配置:

    二、clean-webpack-plugin  会在每次打包后能把前一次打包生成的目录给删掉

    使用:

    1) 在webpack.config.js中引入:

    2)在plugins中去添加配置

     三、mini-css-extract-plugin   把打包后原来生成的注入到html中的style标签的样式抽出去打包成一个css文件,引入到打包后的html中

    安装:npm install --save-dev mini-css-extract-plugin
    使用:
    1)在配置文件中引入
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    2)改变module中css的配置,把style-loader替换为 MiniCssExtractPlugin.loader 

    3.在plugins中配置:

     运行后:就可以看到不再是原来的各种style标签里去写入样式了,而是外链了一个css文件

     

     
  • 相关阅读:
    jekins接通gitee的webhook做自动部署 vue、react、java、springBoot
    vue可复用性 & 组合
    vite使用短链接
    Ubuntu12.04(X86_64)上安装Mesa8.0.4
    回调函数
    c#隐式转换
    OpenGL ES2 的OffScreen实现
    Catch exception from other thread
    C# []、List、Array、ArrayList 区别及应用
    redhat update
  • 原文地址:https://www.cnblogs.com/haoqiyouyu/p/14401043.html
Copyright © 2011-2022 走看看