plugins的介绍使用-程序员宅基地

Plugins

扩张webpack本身的一些功能,他们会允许在各种模块解析完成以后的打包编译阶段,比如对解析后的模块文件进行压缩等。

HtmlwebpackPlugin

在打包结束后,自动生成一个html文件,并把打包生成的js抹开引入到该html

npm install --save-dev html -webpack-plugin
// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    
 ...
  plugins: [
     new HtmlWebpackPlugin({
    
       title: "My App",
       filename: "app.html",
       template: "./src/html/index.html"
     }) 
  ]
};
<!--./src/html/index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
    <h1>html-webpack-plugin</h1>
</body>
</html>

html 模板中,可以通过 <%=htmlWebpackPlugin.options.XXX%> 的方式获取配置的值

clean-webpack-plugin

删除(清理)构建目录

npm install --save-dev clean-webpack-plugin
const {
    CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
    
 ...
  plugins: [
    ...,
    new CleanWebpackPlugin(),
    ...
  ]
}

mini-css-extract-plugin

提取 CSS 到一个单独的文件中

npm install --save-dev mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    
 ...,
  module: {
    
   rules: [
    {
    
     test: /\.s[ac]ss$/,
     use: [
      {
    
       loader: MiniCssExtractPlugin.loader
     },
          'css-loader',
          'sass-loader'
        ]
   }
   ]
 },
  plugins: [
    ...,
    new MiniCssExtractPlugin({
    
     filename: '[name].css'
    }),
    ...
  ]
}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/LJiaJia595/article/details/114154679

智能推荐

李宏毅机器学习笔记第1周-机器学习基本概念_anomaly compression-程序员宅基地

文章浏览阅读855次。机器学习基本概念_anomaly compression

MD5碰撞-程序员宅基地

文章浏览阅读9.4k次,点赞29次,收藏109次。在CTF中可以说是经常碰到md5加密了,一般都是进行强比较抑或是弱比较,考法非常多,但是万变不离其中。只要我们掌握了原理,一切问题便迎刃而解了。文章首发于我的博客,格式可能比较清晰,有兴趣了解CTF中MD5碰撞的伙伴可以移步查看。_md5碰撞

普里姆算法c语言(详细解读)_c语言普里姆算法-程序员宅基地

文章浏览阅读854次,点赞5次,收藏12次。找到与这个系统邻接的边(0,1),(5,4),比较两者的权值,容易发现权值最小的为25,因此加入边(5,4),同时加入结点4和边(5,4)。4.将0,5,4,3以及相关的边看成一个整体,与其邻接的边有(0,1)28,(4,6)24,(3,6)18,(3,2)12,四个边中权值最小的边是(3,2),所以加入结点2以及边(3,2)。5.与4中所构成的整体邻接的边有(0,1)28,(4,6)24,(3,6)18,(2,1)16,四者中权值最小的边为(2,1),所以加入结点1以及边(2,1)。_c语言普里姆算法

nohub 和 & 在linux上不间断后台运行程序-程序员宅基地

文章浏览阅读3.1k次,点赞2次,收藏15次。长时间在服务器上运行深度学习代码,使用nohub 命令行 & 可以让代码不间断在后台运行_nohub

Policy-based Reinforcement learning_policy函数-程序员宅基地

文章浏览阅读4k次,点赞18次,收藏69次。强化学习这一章会讲基于策略的强化学习Value-Based Reinforcement Learning-DQN强化学习前言一、policy函数二、DQN2.1 游戏中agent的目标是什么?2.2 agent如何做决策?2.3 如何理解Q* 函数呢?2.5 DQN打游戏?三、如何训练DQN?3.1 TD算法3.2 TD算法训练DQN四、训练步骤六、总结前言说明一下:这是我的一个学习笔记,课程链接如下:最易懂的强化学习课程公众号:AI那些事一、policy函数我们回顾一下Acti_policy函数

project2016调配资源冲突-程序员宅基地

文章浏览阅读5.4k次,点赞9次,收藏26次。(1) Project查看资源负荷情况的方法和结果在工时类资源会存在资源过度分配(在同一个时间段给工时类资源分配的资源超出了他的最大单位)的情况,而成本类、材料类资源则不会有、查看资源负荷的方法有:在视图栏------资源图表如下图在这里我们可以看到每个资源的分配状况,如下图滚动鼠标滑轮就会出现不同的资源分配状况此时选择“资源”—“下一个资源过度分配处”如下图总结:甘特图、..._project2016调配资源冲突

随便推点

Unity中怎么播放视频_unity 播放视频-程序员宅基地

文章浏览阅读1.9w次,点赞40次,收藏209次。一.首先在场景中新建UI中的Raw Image可以按住Alt再点击下图红色箭头所示将Raw Image铺满游戏全屏(也可以自己调整大小)二.给Raw Image添加Video Player组件三.在Assets或者自己想要的文件夹中创建Render Texture四.将准备好的视频(这里用到的视频格式是mp4)拖入项目中并做如下修改这里我把新建的Render Texture命名为2,拖入的视频也命名为2(随便命的,不要在意)这里我们看到这个Render Te..._unity 播放视频

使用BOOTICE 恢复系统启动项_bootice保存后没用-程序员宅基地

文章浏览阅读9.7k次,点赞2次,收藏9次。使用BOOTICE 恢复系统启动项我在安装deepin 系统的时候,经常遇到重启进不去系统,每次重启都会进入windows 系统,这让我感到特别头疼,试了好多次都不成功,有些情况是,成功后再次重启又回到了windows系统。后来终于在PE中利用一款叫做BOOT ICE的工具成功解决。BOOTICE— 引导扇区维护工具简介BOOTICE 是一个启动相关的维护的小工具,主要用于安装、修复、备份和恢复磁盘_bootice保存后没用

文本分类与SVM_svm分类-程序员宅基地

文章浏览阅读9.5w次,点赞54次,收藏202次。之前做过一些文本挖掘的项目,比如网页分类、微博情感分析、用户评论挖掘,也曾经将libsvm进行包装,写了一个文本分类的开软软件Tmsvm。所以这里将之前做过一些关于文本分类的东西整理总结一下。1 基础知识1. 1 样本整理文本分类属于有监督的学习,所以需要整理样本。根据业务需求,确定样本标签与数目,其中样本标签多为整数。在svm中其中如果为二分类,样本标签一般会设定为-1和_svm分类

力扣——206.反转链表_力扣链表反转-程序员宅基地

文章浏览阅读141次。题目python代码方法一:利用新列表,创建新的链表# Definition for singly-linked list.# class ListNode(object):# def __init__(self, val=0, next=None):# self.val = val# self.next = nextclass Solution(object): def reverseList(self, head): ""_力扣链表反转

如何解决深度冲突(Z-fighting),画面闪烁的问题-程序员宅基地

文章浏览阅读3.6k次,点赞3次,收藏6次。参考:OpenGL教程:深度测试深度冲突一个很常见的视觉错误会在两个平面或者三角形非常紧密地平行排列在一起时会发生,深度缓冲没有足够的精度来决定两个形状哪个在前面。结果就是这两个形状不断地在切换前后顺序,这会导致很奇怪的花纹。这个现象叫做深度冲突(Z-fighting),因为它看起来像是这两个形状在争夺(Fight)谁该处于顶端。防止深度冲突第一个也是最重要的技巧是永远不要把多个物体摆得太靠近,以至于它们的一些三角形会重叠。通过在两个物体之间设置一个用户无法注意到的偏移值,你可以完全避免这两个物体之_深度冲突

Android 第三方库--2017年Android开源项目及库汇总_panel.travel-tv.top-程序员宅基地

文章浏览阅读1.1k次。转自:http://blog.csdn.net/jsonnan/article/details/62215287东西有点多,但是资源绝对nice,自己都全部亲身体验过了,大家可放心使用github排名:https://github.com/trending,github搜索:https://github.com/searchUIAwesome-MaterialDesign..._panel.travel-tv.top

推荐文章

热门文章

相关标签