摘要：
webpack提供了一个可选的本地开发服务器,这个本地服务器是基于Nodejs搭建的,内部使用express框架,可以实现我们想要的让浏览器自动刷新显示我们修改代码后的结果 不过他是一个单独的模块,在webpack中使用需要安装 npm install --save-dev webpack-dev- 阅读全文
摘要：
JS打包压缩插件 在项目发布之前,我们必然需要对js等文件进行压缩处理 这里我们就对打包的JS进行压缩 我们使用 一个第三方插件uglifyjs-webpack-plugin,并且版本号指定1.1.1.,和cli2保持一致 npm install uglifyjs-webpack-plugin@1. 阅读全文
摘要：
打包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 阅读全文
摘要：
webpack的起步 基本使用 新建目录结构 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--导入打包后的js文件--> <script src="d 阅读全文
摘要：
安装webpack(3.6.0) 先安装3.6.0,因为在之后学习Vuecli的时候从cli2开始学,学3的时候在升级webpack的版本 全局安装 npm install webpack@3.6.0 -g 在CMD中运行,等待安装完成即可 查看版本 webpack -version 可以看到是3. 阅读全文
摘要：
依赖环境 依赖于Node环境,需要在Node环境上跑,在安装Node的时候,会自动安装npm包管理工具,用于管理Node的依赖环境 NodeJs安装 官网:http://nodejs.cn/ 下载 确保版本大于8.0 安装 双击安装包 点击下一步 点击我同意,然后点击下一步 选择安装位置,然后点击下 阅读全文
摘要：
认识webpack 什么是webpack webpack是一个现代的JavaScript应用的静态模块打包工具 核心就是模块和打包,因为本身浏览器是不支持我们写的一些.vue.sass等文件的,需要通过工具将这些文件打包成浏览器认识的文件,才可以执行 作者：彼岸舞 时间：2021\06\07 内容关 阅读全文