摘要:
打包html文件的插件 目前我们的index.html一致是在项目的根目录下的 我们知道,在真实发布项目的时候,发布的是dist文件夹中的内容,但是dist文件夹中如果没有index,html,那么打包的js等文件也就没有意义 所以我们需要将index.HTML文件也打包到dist文件夹中,这个时候 阅读全文
摘要:
版权插件 都知道一般开源项目都是有自己的版权协议的比如vue 打包出来的文件都是携带自己的版权声明的,归属于谁在什么时间,谁写的,协议是什么 我们也可以写一个自己的版权声明[捂脸] 这个插件是内置的不需要单独安装 修改webpack.config.js // 需要从node依赖中引入 需要添加依赖环 阅读全文
摘要:
plugin的使用 plugin是什么 plugin是插件的意思,通常是用于对某个现有的架构进行扩展 webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等 loader和plugin的区别 loader主要用于转换某些类型的模块,他是一个转换器 plugin是插件 阅读全文
摘要:
组件分离代码 删除test.js 修改index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> </div> 阅读全文
摘要:
webpack中配置Vue 项目中,我们会使用VueJS开发,而且会以特殊的文件来组织vue的组件 所以,下面学习一下如何在webpack中集成vue NPM安装Vue simpleloader拷贝一份为simplevue npm install vue --save 因为在运行时也需要依赖vue, 阅读全文
摘要:
ES6语法转ES5 在默认的情况下,ES6的语法在打包过后还是ES6的语法,但是这样会存在一个问题,那就是有的浏览器会不支持,所以需要将ES6转为ES5 npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 执行一下 阅读全文
摘要:
处理图片加载:url-loader 使用时需要设置option:(limit:文件大小)如果小于设置的文件大小直接使用url-loader加载,会将图片转换为base64,如果是大于设置的大小,会调用file-loader进行加载 如果需要对图片进行按照自己要求的格式进行命名的话,就需要在optio 阅读全文
摘要:
拷贝一份项目重新命名为simpleloader(拷贝过程会慢,应为其中存在module依赖) 在这个目录结构中,我将main.js从JS文件夹中提取了出来,放到了src目录下,应为一般关于主文件一般都是和文件夹同一级的,比如index.html,其他的就是改了一下webpack.config.js中 阅读全文
摘要:
什么是loader loader是webpack中一个非常核心的概念 webpack用来做什么呢 在我们之前的实例中,我们主要是用webpack来处理我们写的JS代码,并且webpack会自动处理JS之间相关联的依赖 但是,在开发中我们不仅仅有基本的JS代码处理,我们也需要加载CSS,图片,也包括一 阅读全文
摘要:
webpack的配置 webpack.config.js 上面执行的webpack命令很长,那么有没有什么简化的方式呢,有,那就是配置文件,默认名称为webpack.config.js 拷贝webpack起步中的目录结构及其文件和内容,从新命名一个文件夹,并在其中新建webpack.config.j 阅读全文