Webpack使用
Webpack 一个前端模块化打包工具
其他打包工具:grunt/gulp(核心是任务,指明将文件转换成何种文件,自动化流程处理)
核心(是一个底层支撑)
1.可以支持模块化开发的文件,支持各种模块化,并将文件打包成绝大多数浏览器可以支持的文件
2.可以帮开发者处理好模块之间的依赖关系
3.不仅仅是JavaScript文件,CSS,图片,json文件等等在webpack中都可以被当做模块来使用
4.依赖于node环境
*NPM 工具,用来管理node的各种包
开发时依赖
运行时依赖
本地
全局
各种loader
loader的中文网站
可以找各种的配置loader,通过webpack命令行进行配置
每种loader都有其自己的作用
css文件的loader与配置
less文件的loader与配置
配置
图片文件的loader与配置
1.考虑文件大小问题,程序会根据文件大小进行不同方式的处理,主要有limit决定
2.文件超过limit时需要安装其它的包file-loader
3.将图片文件放在一个文件夹内,并对图片文件打包成的包的名字进行修改,不然路径无法找到
ES6语法处理
配置Vue
第一:安装npm install vue --save
第二:导入挂在实例
第三:修改webpa.config.js文件,指定版本,然后正确使用
SPA 单页面复应用
在vue实例对象中的template替换到el挂载的id中
vue版本不匹配问题,改一下版本,然后执行npm install进行安装
将组建集成到一个.vue文件中,然后传给main.js文件,最终代替index.html
文件中的标签位置
解决是否省略扩展名
webpack中的plugin