一些插件作用

Vue-loader:解析和转换.vue文件,提取出其中的逻辑代码script,样式代码style,以及HTML模板template,
再分别把它们交给对应的loader去处理
Css-loader:加载由vue-loader提取出的css代码
vue-template-compiler:把vue-loader提取出的HTML模板编译成对应的可执行的javascript代码,这和react中的
JSX语法被编译成Javascript代码类似,预先编译好HTML模板相对于在浏览器中再去编译HTML的好处在于性能更好。
总结:vue-loader的作用就是提取。
html-webpack-plugin
插件作用:生成html文件,并且引用相关的 assets 文件(如 css, js)
less-loader
插件作用: less文件加载
postcss-loader
插件作用:给不同浏览器的样式加上前缀,如-webkit-
style-loader
插件作用:编译vue的样式部分
url-loader
插件作用:将图片文件转换为base64编码并载入浏览器能够减少http请求数,但是增大了js或html文件的体积
file-loader
插件作用:用来处理图片,其实也可以在js和html及其他文件上
babel-loader
插件作用:处理ES6语法,将其编译为浏览器可以执行的js语法。
babel-core
插件作用:把 js 代码分析成 ast ,方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的,如箭头函数,rest 参数,函数默认值等,
这种语言层面的不兼容只能通过将代码转为 ast,分析其语法后再转为低版本 js。首先安装 babel-core。
babel-preset-env
插件作用:babel-preset-env 是一个新的 preset,可以根据配置的目标运行环境(environment)自动启用需要的 babel 插件。使用这个插件,再也不需要使用 es20xx presets 了。
webpack-dev-server
插件作用:webpack-dev-server 为你提供了一个简单的 web 服务器,并且能够实时重新加载(live reloading)。

webpack-dev-server是我非常喜欢的一个插件,我觉得没有什么插件比webpack-dev-server更加吸引我了。
因为它提供HTTP服务而不是使用本地文件预览,监听文件的变化并自动刷新网页做到实时预览,支持Source Map并方便调试

猜你喜欢

转载自www.cnblogs.com/smart-girl/p/11090904.html