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文件交予后台开发人员进行服务器上线就可。

成功运行!

猜你喜欢

转载自blog.csdn.net/enhenglhm/article/details/122847642