2018年03月_ruiurrui

12月 11月 10月 09月 08月 07月 03月

原创 webpack(6)_代码分割和懒加载

代码分割和懒加载

2018-03-13 13:49:09 515 1

原创 webpack(5)_提取公共代码

为什么要提取公共代码将项目中的公共模块提取出来，可以减少代码的冗余度，提高代码的运行效率和页面的加载速度。使用CommonsChunkPlugin提取公共代码初始化工程 1、创建工程空目录Test 2、进入Test目录 3、使用npm初始化工程 npm init 4、创建webpack.config.js文件安装webpack npm install webpack...

2018-03-12 22:35:27 2172

原创 webpack(4)_编译Typescript

使用webpack编译Typescripttypescript安装初始化工程 1、创建工程空目录Test 2、进入Test目录 3、使用npm初始化工程 npm init 4、创建webpack.config.js文件 5、创建tsconfig.json文件安装typescript npm install typescript --save-dev安装ts-load...

2018-03-11 23:46:12 1653

原创 webpack(3)_编译ES6

使用babel编译ES6语法javascript的ES2015[es6]规范出来以后，许多浏览器都开始支持ES6语法，但是很多低版本浏览器还不兼容，甚至一些高版本浏览器也不是完全支持ES6语法，所以需要使用Babe来将ES6代码转为ES5代码，从而在能够在浏览器上运行。 babeljs官网：https://babeljs.cn/babel安装初始化工程 1、创建工程空目录Te...

2018-03-11 15:23:20 531

原创 webpack(1)_初识

webpack简介中文官网：https://doc.webpack-china.org/webpack安装webpack使用名词解析chunk chunk意为’块’，在webpack中表示一个代码块。bundle bundle意为’捆，绑’，在webpack中表示将代码打包合在一起。npm install plugin –save –save表示在项目中...

2018-03-09 17:28:28 163

原创 webpack(2)_打包JS

webpack打包前端打包就是把所有的 js 文件, css 文件都分别压缩合并为一个js 和css 文件, 这样浏览器就可以通过少量的 HTTP 请求获取到所需要的前端资源, 可以节省流量, 加快页面加载速度。当然打包过程还需要对TypeScript、Vue等js解析，Less、Sass、Stylus等css预处理、资源的合并压缩、js合并、混淆、兼容优化等。打包方式webpac...

2018-03-08 23:08:03 2152