webpack系统教程
prefectCC
这个作者很懒,什么都没留下…
展开
-
webpack基础篇-HtmlWebpackPlugin生成html(七)
我们现在的代码里,html中引入的index.js是手动写入的,主要问题有:我们打包好的文件有时候会带有hash(接下来一章会讲到),如果直接引入,则每次修改都需要手动修改引入。HtmlWebpackPlugin让你可以用此插件为你生成一个HTML文件,使用lodash模板提供你自己的模板,或使用你自己的loader。1,安装HtmlWebpackPluginnpm install html-webpack-plugin -D2,单页面:在webpack.config.js里设置plugins原创 2020-06-29 16:52:11 · 1596 阅读 · 0 评论 -
wabpack基础篇-watch监听(六)
watch的原理是:watch开启后,webpack会隔一段时间(poll)轮训一次要打包的文件,监听到变化,会缓存一下第一次,在一段时间时候后(aggregateTimeout设置的),检测所有修改的文件。这时候把所有修改文件一起编译打包。原创 2020-06-28 10:48:07 · 1636 阅读 · 0 评论 -
webpack解析less、css(五)
webpack解析less、css在项目里我们引用css文件时,需要使用css-loader加载css文件转化为common.js对象,插入到代码里去。还需要使用style-loader将样式通过解析css1,安装css-loader、syle-loadernpm install css-loader style-loader -D2,配置webpack.config.js { test:/\.(css)$/, loader:[ 'style-loader',原创 2020-06-21 17:09:01 · 429 阅读 · 0 评论 -
webpack解析图片(四)
webpack解析图片如果我们直接引入的图片是网上链接对应的图片,那么是可以不用图片解析器的。如果是在图片放在本项目的路径内引入就需要用的图片解析器。常用的图片解析器有file-loader和url-loader当我们引入本地图片,而没有用对应loader时会看到如下报错url-loader是把图片转为base64字节的文件,在options里可以设置最大图片大小。如果超过这个值,就会和file-loader行为一样,打包后会生成单独的图片文件放在dist目录。这篇我们就以url-loader为原创 2020-06-20 13:33:51 · 599 阅读 · 0 评论 -
webpack解析es6(三)
webpack解析es6为es5语法上一节中,我们看webpack核心组成部门时,以解析.vue文件为例进行的。webpack原生支持js语法,但是es6有很多新特性,有些浏览器和webpack并不能很好的理解,这时需要借助babel来进行把es6的语法转为es5语法。一、webpack解析es6使用的解析组件是babel-loader,而babel呢是需要依赖babel,所以我们用的时候需要安装babel。新版本的babel进行了更加详细的拆分,按需安装即可。1,我们这里先本地安装babel-原创 2020-06-18 23:11:11 · 457 阅读 · 0 评论 -
webpack核心概念entry、output、loader、plugins基础用法(二)
webpack工作内容可以用官网的一个图来表示从图中可以看出,webpack是现在js应用程序的静态打包器,当webpack处理一个程序时,会逐步找到各个模块的依赖关系形成依赖关系图,然后把这些模块打包成一个或者多个文件。1,入口文件entrywebpack处理各个模块关系时,需要有一个入口作为开端,来形成依赖关系图,entry就是用来指定这个入口文件的。a、如果只是单页面应用时,入口文件只需要指定一个入口文件。默认值为./src接下来我们看一个 entry 配置的最简单例子:module.e原创 2020-06-08 17:41:33 · 508 阅读 · 0 评论 -
webpack安装入门(1)
webpack英文网站https://webpack.github.io/中文网站 https://www.webpackjs.com/concepts/entry-points/webpack有什么用:es6的语法转化为es5浏览器可读的–(需要借助babel)vue、react等可以直接编译css可以用less、sass等语法并自动补全浏览器的兼容问题。压缩文件和图片。(压缩图片效果不好)1,安装node和npm在node官网下载node应用,官网地址为:http:/原创 2020-06-08 13:29:03 · 319 阅读 · 0 评论