![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端工具
一只前端小菜鸟~
有大量前端HC,base:杭州、东莞、成都、西安都可,感兴趣可以添加scum__peace
展开
-
webpack 学习(1)--- webpack入门
目录 1、webpack介绍: 2、webpack的安装 3、配置文件webpack.config.js 4、我们来作一个实例(Hello World!) 1、webpack介绍: webpack是一个现代的JavaScript应用模块打包器(module bundler),它能把各种资源,例如JS(含JSX)、coffee、样式(less/sass)、图片等都作为模块来处理和使用。它...原创 2018-08-18 22:13:09 · 204 阅读 · 0 评论 -
webpack 学习(2)--- 多入口文件(Multiple entry files)
目录 一、live-server服务器介绍: 二、webpack配置多路口文件 一、live-server服务器介绍: 以前我们是用live-server这个服务器,那这里就给大家介绍一下:ive-server是一款简单的开发用的Http服务器。特点就是在你静态文件进行修改后,有自动加载的功能。 使用它主要有两个原因: 1、对Ajax的操作必须要有服务器的支持,比如用javascri...原创 2018-08-18 22:13:15 · 1819 阅读 · 0 评论 -
webpack 学习(3)---- 使用Webpack CSS loader加载器
目录 一、什么是loader 二、loader的解析 三、安装loader 四、CSS-loader 实例 一、什么是loader loader用于转换应用程序的资源文件,他们是运行在nodejs下的函数,使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loader来告诉webpack去加载一个coffeeScript或者Babel文件。 二、load...原创 2018-08-18 22:13:23 · 1279 阅读 · 0 评论 -
webpack 学习(4)--- 使用webpack Image loader 加载图片
直接用一个例子说明 建立index.html文件,引入bundle.js <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name=&原创 2018-08-18 22:15:10 · 1327 阅读 · 1 评论 -
webpack 学习(5)--- 使用uglify-js 压缩打包JS代码
一、webpack 插件机制介绍: 插件可以完成更多loader不能完成的功能。插件的使用一般是在webpack的配置信息 plugins选定中指定。Webpack本身内置了一些常用的插件,还可以通过npm安装第三方插件。 二、uglify-js介绍: ugligy-js是一个用npm安装的JavaScript代码压工具,我们在grunt和gulp中经常使用。 用npm命令进行安装: ...原创 2018-08-18 22:13:37 · 3378 阅读 · 0 评论 -
webpack 学习(6)--- 使用webpack构建本地服务器
我们之前一直都在用live-server充当本地服务器,其实它和webpack是不搭的,我们可以利用webpack自带的webpack-dev-server来构建一个本地服务器。它让你的浏览器检测你的代码修改,并自动刷新修改后的结果,它是基于node.js构建。webpack-dev-server是一个单独的组件,在webpack中进行配置之前需要单独安装它作为项目依赖。 安装webpack-...原创 2018-08-18 22:13:41 · 676 阅读 · 0 评论