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 用法教程
后面再逐渐添加常用的插件。