1、html-webpack-plugin
Simplifies creation of HTML files to serve your webpack bundles.
 
主页地址:
 
安装方法:
npm i --save-dev html-webpack-plugin
 
2、extract-text-webpack-plugin
Extracts text from a bundle into a separate file.
 
主页地址:
 
安装方法:
npm install --save-dev extract-text-webpack-plugin
 
3、style-loader
Adds CSS to the DOM by injecting a <style> tag.
 
主页地址:
 
 
安装方法:
npm install style-loader --save-dev
 
 
 
4、css-loader
The css-loader interprets @import and url() like import/require() and will resolve them.
 
主页地址:
 
 
安装方法:
npm install --save-dev css-loader
 
 
 
5、sass-loader
Loads a Sass/SCSS file and compiles it to CSS.
 
主页地址:
 
 
安装方法:
npm install sass-loader node-sass --save-dev
 
 
 
6、url-loader
主页地址:
 
 
安装方法:
npm install url-loader --save-dev
 
7、file-loader
主页地址:
 
安装方法:
npm install file-loader --save-dev
 
8、html-loader
主页地址:
 
安装方法:
npm i -D html-loader
 
9、image-webpack-loader
Image loader module for webpack. 可用于压缩图片文件.
 
主页地址:
 
安装方法:
npm install image-webpack-loader --save-dev
 
10、babel-loader
This package allows transpiling JavaScript files using Babel and webpack.
 
 
主页地址:
 
 
安装方法:
webpack 4.x | babel-loader 8.x | babel 7.x
npm install -D babel-loader @babel/core @babel/preset-env webpack
webpack 4.x | babel-loader 7.x | babel 6.x
npm install -D babel-loader@7 babel-core babel-preset-env webpack
 
11、webpack-dev-server
Serves a webpack app. Updates the browser on changes.
 
主页地址:
 
 
安装方法:
npm install webpack-dev-server --save-dev
 
 
 
12、vue-loader
vue-loader is a loader for webpack that allows you to author Vue components in a format called Single-File Components (SFCs):
 
 
 
主页地址:
 
 
 
安装方法:
npm install vue-loader --save-dev
 
 
13、@babel/preset-react
Babel preset for all React plugins.
 
 
 
 
主页地址:
 
 
 
安装方法:
npm install --save-dev @babel/preset-react
 
 
 
14、clean-webpack-plugin
A webpack plugin to remove your build folder(s) before building.
 
 
 
主页地址:
 
 
 
安装方法:
npm i clean-webpack-plugin --save-dev
 
 
15、raw-loader
A loader for webpack that allows importing files as a String.
 
 
主页地址:
 
安装方法:
npm install raw-loader --save-dev
 
 
16、pug-html-loader
Pug HTML loader for webpack.
 
 
主页地址:
 
安装方法:
npm install pug-html-loader
 
依赖于pug和raw-loader 

前端技术之:常用webpack插件的更多相关文章

  1. 前端技术之:webpack热模块替换(HMR)

    第一步:安装HMR中间件: npm install --save-dev webpack-hot-middleware   第二步:webpack配置中引入webpack对象     const we ...

  2. 【前端必会】webpack 插件,前进路绕不过的障碍

    背景 webpack的使用中我们会遇到各种各样的插件.loader. webpack的功力主要体现在能理解各个插件.loader的数量上.理解的越多功力越深 开始 https://webpack.do ...

  3. [转] Web前端开发工程师常用技术网站整理

    1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...

  4. Web前端开发工程师常用技术网站整理

    1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...

  5. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  6. webpack常用的插件安装命令

    webpack常用的插件安装命令:1:npm install html-webpack-plugin --save-dev //自动快速的帮我们生成HTML.2:npm install css-loa ...

  7. Sublime Text 前端开发常用扩展插件推荐

    Sublime Text 前端开发常用扩展插件推荐 Sublime Text Sublime Text 是程序员们公认的编码神奇,拥有漂亮的用户界面和强大的功能 更重要的是,Sublime Text ...

  8. 必知干货:Web前端应用十种常用技术你全都知道吗?

    Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式,本文将为您 ...

  9. 【前端必会】不知道webpack插件? webpack插件源码分析BannerPlugin

    背景 不知道webpack插件是怎么回事,除了官方的文档外,还有一个很直观的方式,就是看源码. 看源码是一个挖宝的行动,也是一次冒险,我们可以找一些代码量不是很大的源码 比如webpack插件,我们就 ...

随机推荐

  1. 关于CSS书写规范、顺序

    关于CSS的书写规范和顺序,是大部分前端er都必须要攻克的一门关卡,如果没有按照良好的CSS书写规范来写CSS代码,会影响代码的阅读体验.这里总结了一个CSS书写规范.CSS书写顺序供大家参考,这些是 ...

  2. 基于SpringBoot+WebSocket搭建一个简单的多人聊天系统

    前言   今天闲来无事,就来了解一下WebSocket协议.来简单了解一下吧. WebSocket是什么   首先了解一下WebSocket是什么?WebSocket是一种在单个TCP连接上进行全双工 ...

  3. Java 学习笔记之 Sleep停止线程

    Sleep停止线程: 在Sleep状态下被interrupt,interrupted 状态会被擦除,返回false. 线程在Sleep状态下被interrupt: public class Sleep ...

  4. Bitmap简介

    1.  BitMap Bit-map的基本思想就是用一个bit位来标记某个元素对应的Value,而Key即是该元素.由于采用了Bit为单位来存储数据,因此在存储空间方面,可以大大节省.(PS:划重点 ...

  5. 开发 Django 博客文章阅读量统计功能

    作者:HelloGitHub-追梦人物 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 如何精确地记录一篇文章的阅读量是一个比较复杂的问题,不过对于我们的博客来说,没有必要 ...

  6. 手把手教你吧Python应用到实际开发 不再空谈悟法☝☝☝

    手把手教你吧Python应用到实际开发 不再空谈悟法☝☝☝ 想用python做机器学习吗,是不是在为从哪开始挠头?这里我假定你是新手,这篇文章里咱们一起用Python完成第一个机器学习项目.我会手把手 ...

  7. Vue躬行记(3)——样式和表单

    Vue对DOM元素的class和style两个特性做了专门的增强,即对CSS类和内联样式做了一层封装,通过v-bind指令来处理它们,而接收的表达式既可以是简单的字符串.对象或数组,也可以是复杂的计算 ...

  8. C#输入中文实现转拼音首字母(亲测,字库不全)

    public string GetPYString(string str) { string tempStr = ""; foreach (char c in str) { if ...

  9. git 删除未提交的文件

    git checkout . && git clean -xdf

  10. Tomcat源码分析三:Tomcat启动加载过程(一)的源码解析

    Tomcat启动加载过程(一)的源码解析 今天,我将分享用源码的方式讲解Tomcat启动的加载过程,关于Tomcat的架构请参阅<Tomcat源码分析二:先看看Tomcat的整体架构>一文 ...