webpack打包非js部分---加载器loader、babel处理高级语法 和vue组件

webpack默认打包js部分，其它非js模块默认处理不了

如下引入css文件打包报错，webpack处理不了需要加载器才可以

配置打包css文件  

配置打包less文件

 编写less文件

 引入less文件

 打包生成bungle.js

配置打包scss文件

 注意红框

编写scss文件

 导入

 自动添加postCSS自动兼容前缀

新建postcss.config.css

 webpack.config.css

 打包图片和字体文件 

比如加载背景图片

报错

 打包图片和字体文件基本使用

 图片大小等于limit大小，将变成图片路径，否则转换成base64

 配置babel处理高级语法

 如下语句：

报错，webpack处理不了高级语法

 

处理如下：

配置vue组件的加载器

引入vue单文件

报错：

处理如下：

 

配置如图：

 

 

在webpack中使用vue

 设置：

 

 webpack打包发布

运行npm run build执行webpack -p命令，此时就会读取webpack.config.js文件，读取打包操作命令

webpack.config.js  生成dist目录

 将dist文件交予后台开发人员进行服务器上线就可。

成功运行！