脚本宝典收集整理的这篇文章主要介绍了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的使用.

参考

最近在学习webpack和vue，但是有很多loader的作用不是很理解，不知道有没有关于loader全面的介绍？
我的webpack使用
CSS Modules 用法教程

后面再逐渐添加常用的插件。

脚本宝典总结

以上是脚本宝典为你收集整理的vue+webpack 安装常见插件全部内容，希望文章能够帮你解决vue+webpack 安装常见插件所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。