![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
ruiurrui
If you can't fly, then run, if you can't run then walk, if you can't walk then crawl, but whatever you do, you have to keep moving forward.
展开
-
webpack(2)_打包JS
webpack打包前端打包就是把所有的 js 文件, css 文件都分别压缩合并为一个js 和css 文件, 这样浏览器就可以通过少量的 HTTP 请求获取到所需要的前端资源, 可以节省流量, 加快页面加载速度。当然打包过程还需要对TypeScript、Vue等js解析,Less、Sass、Stylus等css预处理、资源的合并压缩、js合并、混淆、兼容优化等。打包方式webpac...原创 2018-03-08 23:08:03 · 2141 阅读 · 0 评论 -
webpack(8)_html_使用html-webpack-plugin
本章主要记录讲述如何使用html-webpack-plugin来生成html。主要记录以下三点:html-webpack-plugin的使用使用html-loader处理html中引入的图片处理html中图片和css中的图片html-webpack-plugin的使用安装npm install html-webpack-plugin --save-dev引入...原创 2018-08-25 18:01:58 · 553 阅读 · 0 评论 -
webpack(10)_使用EsLint检查代码格式
本章主要讲解使用EsLint来检查代码的格式,主要内容有:使用eslint-loader使用eslint-plugin-html使用eslint-friendly-formatter使用EsLint安装eslint的时候报个错误,查了一下,执行npm cache clean --force,清除下缓存就可以安装了。npm ERR! Unexpected end of JSO...原创 2018-08-26 23:26:09 · 1626 阅读 · 0 评论 -
webpack(9)_使用webpack-dev-server
webpack-dev-server1、介绍安装 npm install webpack-dev-server --save-dev1、live reloading2、路径重定向3、https4、浏览器中显示编译错误5、接口代理6、模块热更新...原创 2018-08-26 17:59:00 · 562 阅读 · 0 评论 -
webpack(7)_css_文件处理
本章主要讲述在webpack中,对文件的处理,主要讲解以下几个loader的使用配置:file-loaderurl-loaderimage-loaderpostcss-sprites使用file-loader1、作用 2、安装 3、options配置使用url-loader使用image-loader使用postcss-sprites1、css中引...原创 2018-08-07 16:46:40 · 534 阅读 · 0 评论 -
webpack(7)_CSS_配置Less和Sass
本篇文章主要讲解webpack对Less和Sass的打包配置:安装css-loader安装style-loader安装less-loader和sass-loader实例初始化项目,创建package.json npm init安装style-loader npm install style-loader --save-dev安装css-loader npm in...原创 2018-08-01 18:40:17 · 1002 阅读 · 0 评论 -
webpack(7)_CSS_使用purifycss-webpack来实现Tree Shaking
本文主要讲解使用purifycss-webpack来实现css的Tree Shaking,Tree Shaking意思是摇树,即为将项目中没有用到过滤掉,不做打包,本章知识结构:项目准备使用purifycss功能测试项目准备1、使用css-loader和style-loader 不了解的请先查看文章:https://blog.csdn.net/u010982507/artic...原创 2018-08-06 00:47:53 · 2779 阅读 · 0 评论 -
webpack(7)_CSS_使用PostCss
安装postcss-loader配置要在less-loader前面,css-loader和style-loader的后面 - 安装style-loader - 安装css-loader - 安装less或者sass - 安装postcss npm install postcss --save-dev - 安装postcss-loader npm install postcss-l...原创 2018-08-05 17:08:25 · 1634 阅读 · 0 评论 -
webpack(7)_CSS_使用extract-text-webpack-plugin提取css
webpack(7)CSS提取css原创 2018-08-05 01:09:53 · 6305 阅读 · 0 评论 -
webpack(7)_CSS_使用style-loader和css-loader
style-loader安装style-loader npm install style-loader --save-dev安装css-loader npm install css-loader --save-dev原创 2018-07-30 13:17:58 · 8047 阅读 · 0 评论 -
webpack(6)_代码分割和懒加载
代码分割和懒加载原创 2018-03-13 13:49:09 · 507 阅读 · 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 · 2160 阅读 · 0 评论 -
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 · 1631 阅读 · 0 评论 -
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 · 509 阅读 · 0 评论 -
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 · 157 阅读 · 0 评论 -
webpack(11)_引入jQuery等第三方js库
本章主要记录在webpack中加载和使用以jQuery为例的第三方js库。主要有以下三种情况:在index.html中直接引入js库安装node_modules依赖包将js库保存在本地目录中在index.html中直接引入js库1、通过script标签引入<script src="src/js/jquery-3.3.1.min.js"&gt原创 2018-09-22 14:02:05 · 2934 阅读 · 0 评论