vue+webpack 安装常见插件
html-webpack-plugin
插件地址:https://www.npmjs.com/package...
安装指令:
npm install html-webpack-plugin --save-dev
插件作用:生成html文件,并且引用相关的 assets 文件(如 css, js)
参考地址:
html-webpack-plugin详解
html-webpack-plugin用法全解
extract-text-webpack-plugin
插件地址:https://www.npmjs.com/package...
安装指令:
# for webpack 2 npm install --save-dev extract-text-webpack-plugin@2.1.2 # for webpack 1 npm install --save-dev extract-text-webpack-plugin@1.0.1
插件作用:该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象(提取样式插件)
参考地址:
extract-text-webpack-plugin 作用、安装、使用
copy-webpack-plugin
插件地址:https://github.com/kevlened/c...
安装指令:
npm install --save-dev copy-webpack-plugin
插件作用:拷贝资源
参考地址:
webpack---webpack中经典实用的插件copy-webpack-plugin拷贝资源插件
webpack进阶之插件篇
optimize-css-assets-webpack-plugin
地址:https://www.npmjs.com/package...
安装指令:
npm install --save-dev optimize-css-assets-webpack-plugin
插件作用:压缩提取出的css,并解决ExtractTextPlugin分离出的js重复问题(多个文件引入同一css文件)
参考地址:
vue-cli中的webpack配置
clean-webpack-plugin
地址:https://www.npmjs.com/package...
安装指令:
npm install clean-webpack-plugin --save-dev
插件作用:用于在building之前删除你以前build过的文件
参考地址:
webpack2利用插件clean-webpack-plugin来清除dist文件夹中重复的文件
vue-style-loader
地址:https://github.com/webpack-co...
安装指令:
npm install style-loader --save-dev
插件作用:编译vue的样式部分
url-loader
地址:https://www.npmjs.com/package...
安装指令:
npm install --save-dev url-loader
插件作用:将图片文件转换为base64编码并载入浏览器能够减少http请求数,但是增大了js或html文件的体积
less-loader
地址:https://www.npmjs.com/package...
安装指令:
npm install --save-dev less-loader less
插件作用: less文件加载
postcss-loader
地址:https://www.npmjs.com/package...
安装指令:
npm i -D postcss-loader
插件作用:给不同浏览器的样式加上前缀,如-webkit-
参考地址:
postcss-loader在webpack2的使用.
script-loader
地址:https://www.npmjs.com/package/script-loader
安装指令:
npm install --save-dev script-loader
插件作用:在全局上下文(global context)执行一次 JS 脚本。
参考地址:script-loader
cross-dev
安装指令:
npm i --save-dev cross-env
插件作用:cross-env能跨平台地设置及使用环境变量,在npm脚本(多是package.json)里这么配置
{"scripts": {"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"} }
运行npm run build,这样NODE_ENV便设置成功,无需担心跨平台问题。
pushstate-server
地址:https://www.npmjs.com/package/pushstate-server
安装指令:
npm install pushstate-server --save
作用:使用HTML5 Pushstate,开启histroy
babel-plugin-dynamic-import-node
地址:https://github.com/airbnb/babel-plugin-dynamic-import-node
作用:动态引入improt
安装指令:
npm install babel-plugin-dynamic-import-node --save-dev
参考
最近在学习webpack和vue,但是有很多loader的作用不是很理解,不知道有没有关于loader全面的介绍?
我的webpack使用
CSS Modules 用法教程
后面再逐渐添加常用的插件。
vue+webpack 安装常见插件相关推荐
- vue 解决安装less插件后出现错误:Analyzer will use module sizes from stats file.
安装less插件后出现错误:Analyzer will use module sizes from stats file. 不要 在控制面板中的 依赖 中选择 开发依赖 ,搜索 less 和 less ...
- vue ---- webpack中的插件 webpack-dev-server
在上一篇笔记中有一个简单的项目 上一个项目中的痛点(代码变后不能立即编译打包) 当修改偶数列为green后发现 页面效果并没有变,需要npm run dev一次才会重写打包代码 webpack如何解决 ...
- Vue脚手架安装 与 Vue项目创建运行、vue项目迁移后运行失败问题
目录 Vue脚手架安装 vue 如何查看vue cli的安装位置 Vue项目创建与运行 1.创建项目 2.运行项目 3.检测运行是否成功 项目文件作用介绍 快捷安装项目所需依赖 命令 npm i Vu ...
- Vue安装jquery插件
安装jquery插件 1.npm install jquery --save 第一次安装的时候一直提示没有管理员权限:Please try running this command again as ...
- vue mianjs 引用css_vue 学习记录八——webpack中常见的配置项
在web开发中,我们得使用到js(es6).css.html等技术,需要对资源文件管理,例如图片,同时还需要对性能.热加载等进行处理:这些功能都是可以在webpack中进行配置管理的,下面具体介绍说明 ...
- vue全局安装jquery,vue使用bootstrap框架,vue中封装websocket通讯,vue引入element-ui 组件库,引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...
- Vue Devtools安装(谷歌浏览器插件:)
vue安装: # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新 ...
- vs vue 查看webpack安装成功_在Vue+webpack中详细讲解基础配置
这篇文章主要介绍了Vue+webpack项目基础配置教程,需要的朋友可以参考下. 最近在学习webpack,跟着课程一个单页面应用,在这里记录一下. 这个部分主要讲了如何配置webpack的环境,以及 ...
- 从零开始学VUE之Webpack(Html打包插件的使用)
打包html文件的插件 目前我们的index.html一致是在项目的根目录下的 我们知道,在真实发布项目的时候,发布的是dist文件夹中的内容,但是dist文件夹中如果没有index,html,那么打 ...
最新文章
- window.open的小技巧分享(转)
- postgresql 可调试
- Android <java.lang.ClassNotFoundException:Didn‘t find class ‘XXX‘ on path:DexPathList> 解决
- sql 优化之关于null 和数据类型
- 国内首次 Istio Meetup 来了,主流社区专家邀你来共聊
- 第10章 例题 7-4 汉诺(Hanoi)塔问题
- airpods2使用_如何使用AirPods和AirPods Pro:完整指南
- java scala_经过几天的Scala回归Java的10个最烦人的事情
- mysql数据库连接关闭_解决mysql数据库连接自动关闭问题
- 贝叶斯软件genle教程_一文读懂蒙特卡罗方法和应用贝叶斯推理
- oracle ko16mswin949,mysql字符集 - osc_wq7ij8li的个人空间 - OSCHINA - 中文开源技术交流社区...
- 老对手 Intel 与 AMD 也开始合作打造新品了,Nvidia 怎么看?
- kylin: NoClassDefFoundError: org/apache/hadoop/hive/conf/HiveConf
- 边缘计算平台类产品概览
- HttpClient 解释
- ubuntu如何更改crontab的默认编辑器
- 使用tcpdump抓取HTTP包
- 模块已加载,但找不到入口点DLLRegisterServer
- 神仙打架!传言阿里 P10 赵海平被 P11 多隆判定 3.25 离职,如何评价阿里 P10 赵海平对王垠的面试?...
- 高考为什么考计算机信息,信息技术是否应该进入高考?
热门文章
- border:0 none,border:none;,border:0;三者之间的区别
- 【ES6】Set Map数据结构、Iterator遍历器
- 详细讲解C++ 类的继承
- 新型智能芯片防伪印章设备_思格特智能印章管理系统成功签约山东问童动力设备公司...
- linux如何查看jmx参数,linux下利用JMX监控Tomcat
- java使用properties_Java中使用Properties配置文件的简单方法
- python爬虫从入门到放弃(八)之 Selenium库的使用
- HIve常用CLI命令
- Flash--元件和实例
- mvc:annotation-driven/浅析