• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

Vue学习总结(二)

开发技术 开发技术 1周前 (05-03) 3次浏览

webpack

Webpack 是一个前端资源的打包工具,它可以将js、image、css等资源当成一个模块进行打包。
Vue学习总结(二)

好处:

  • 将许多碎小文件打包成一个整体,减少单页面内的衍生请求次数,提高网站效率
  • 将ES6的高级语法进行转换编译,以兼容老版本的浏览器
  • 将代码打包的同时进行混淆,提高代码的安全性

核心概念

  • 入口(entry)
    webpack打包的起点,可以有一个或多个,一般是js文件
    webpack会从起点文件开始,寻找起点直接或间接依赖的其它所有的依赖,包括JS、CSS、图片资源等,作为将来打包的原始数据

  • 输出(output)
    出口一般包含两个属性:path和filename。代表webpack打包的目标文件夹,以及文件的名称
    目的地也可以有多个

  • 加载器(loader)
    webpack本身只识别Js文件,如果要加载非JS文件,必须指定一些额外的加载器(loader)

  • 插件(plugins)
    插件可以扩展webpack的功能,让webpack除了打包外还拥有各种更复杂的功能,或者是对打包功能进行优化、压缩,提高效率

webpack配置

配置文件名称默认为webpack.config.js,放到hello-vue的根目录,里面指定上面说的四个核心概念:入口、出口、加载器、插件(加载器和插件是可选的)。

module.exports={
    entry:'./src/main.js',  //指定打包的入口文件
    output:{
        // path: 输出的目录,__dirname是相对于webpack.config.js配置文件的绝对路径
        path : __dirname+'/dist',  
        filename:'build.js'	 //输出的js文件名
    }
}

程序员灯塔
转载请注明原文链接:Vue学习总结(二)
喜欢 (0)