摘要:
一、概述ES6现在正是风华正茂的时候,各个公司都是 尝试去使用,并且作为前端工程师ES6也是体现技术的亮点。但是,现在的浏览器对es6支持不是 特别的兼容,最终还是需要把es6转换为es5,webpack使用babel-loader加载器进行转换,它的配置 也是非常的容易。二、配置babel-loa 阅读全文
摘要:
一、什么是加载器(loaders)loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loader来告诉webpack去加载less文件、sass文件、es的js文件等二、loaders 特性 阅读全文
摘要:
一、多个入口文件之前我们配置的都是 一个入口 但是有的 时候我们需要多个入口文件,这个时候该如何配置?entry 参数支持设置对象,可以设置多个入口文件,这个时候output的filename就不能是固定名字 了,因为入口是多个文件,所以 同时也要修改 output参数: 这里的filename: 阅读全文
摘要:
一、设置代理的原因 现在对前端开发的要求越来越高,并且随着自动化以及模块化的 诞生,前后端开发模式越来越流行。后端只负责接口,前端负责数据展示、逻辑处理。但是前后端开发模式,有一个重要的问题,就是跨域问题。 二、如何配置webpack的代理 webpack代理需要另外一个插件:webpack-dev 阅读全文
摘要:
一、概述开发项目中为了保证上线,开发项目是都需要使用localhost进行开发,以前的做法就是本地搭建Apache或者Tomcat服务器。有的前端开发人员 对服务器的搭建和配置并不熟悉,这个时候需要后台开发人员进行帮忙,有的时候后台开发人员还爱答不理的。为了解决这个爱答不理的问题,webpack-d 阅读全文
摘要:
一、概述前面的章节我们讲解了webpack的安装、webpack.config.js的 基本配置、webpack执行命名以及require方法的使用,不 知道大家有没有发现,当我们每次修改或者新增一个js文件的时候,就会重新执行一下webpack 命令进行编译,这种方式非常的麻烦,这样整个项目下来岂 阅读全文
摘要:
一、 模块化开发模块化开发说白了就不必在html页面,引用所有的js文件。所有的js文件都进行模块化设置,模块之间可以相互引用。Webpack模块化开发是使用module.exports进行相关方法和属性的导出,提供其它模块使用。 每个模块的 都有自己的作用域, 并且每个模块的属性和方法都是局部的, 阅读全文
摘要:
一、优化项目结构,创建相关的文件,项目结构如下:src文件夹存放相关js文件,index.html项目的首页面,dist文件夹是webpack 打包 目录。 index.js内容为: index.html内容为: 这里引用bundle.js是用webpack编译之后的文件,这里不要写src/inde 阅读全文
摘要:
一、前提因为webpack是一个基于node的项目,所以首先需要确保你的电脑里面已经安装了node.js,以及npm。在这里我使用的版本是:node:v5.8.0 ,npm:3.7.3,若是版本问题,请更新到最新版。二、全局安装Webpack常规的安装是通过npm,如果 你对npm不是特别的熟悉请阅 阅读全文
摘要:
一、Webpack 是什么 Webpack 是德国开发者 Tobias Koppers 开发的模块加载器,Instagram 工程师认为这个方案很棒, 似乎还把作者招过去了。在 Webpack 当中, 所有的资源都被当作是模块, js, css, 图片等等。因此, Webpack 当中 js 可以引 阅读全文