webapck基础随手记

1、webpack main.js main.bundle.js ; 将main.js打包成main.bundle.js;

Hash:本次打包的哈希值

Version:本次打包所使用的webpack的版本。

Time:本次打包所花费的时间

Asset:打包生成的文件;

Chunks:打包的分块;

Chunk Names:本次打包的块名称。

2、除js文件的引用外,其他类型的文件类型在require时必须指定相应的loader;

css-loader:使webpack能够处理.css的文件;

style-loader:将css-loader处理的css文件插入到页面当中。

3、webpack --config webpack.dev.config.js 指定打包的配置文件。

4、自动替换html文件里的js引用路径:

使用插件:html-webpack-plugin

npm 安装插件——在plugins中调用。

参数:template:指定html文件的模板;

filename:指定生成文件的名称;支持[hash]占位符。

inject:指定插入脚本文件的位置:在‘head‘还是‘body‘中。

minify:对文件进行压缩。

removeComments:true //删除注释

collapseWhitespace:true    //删除标签之间的空白空格

chunks:指定需要加载的chunk文件。

excluedChunks:指定不加载某些 chunk文件。

5、使用bable处理js文件。

直接在webapck-config.js配置文件中指定处理js文件的loader为bable-loader;

最好指定:exclued:‘绝对路径‘:不处理某些目录的js文件。

inclued:‘ 绝对路径 ‘:只处理某些目录的js文件。

参考:http://babeljs.io/docs/setup/#installation

配置bable参数的三种方式:

在webpack-config.js的loader里,指定bable的query参数。

在项目根目录添加.babelrc配置文件。

在项目的package.json里指定bable的配置参数。

6、 绝对路径 :关于nodejs里的path:

var path = require(‘path‘);

path.resolve(__dirname,‘src‘);          // resolve:解析  __dirname:当前运行环境的目录

7、使用postcss处理css文件:

https://www.npmjs.com/package/postcss-loader

8、处理模板文件:

9、处理图片文件:

CSS里的背景图片: 指定loader:file-loader,图片使用源文件的相对路径。

模板文件中的img标签:不会被loader自动处理。需要用requier的方式。

例:<img src="${require(‘../images/bg.jpg‘)}">

根index.html里的img标签: 指定loader:file-loader,图片使用源文件的相对路径。

关于file-loader的用法:https://www.npmjs.com/package/file-loader

关于url-loader:与file-loader用法一致,但可以指定limit参数。

当大于设置的limit时会直接调用file-loader处理,

当文件小于设置的limit时,会把图片或文件转为base64编码的形式。(不再是URL)

关于image-webapck-loader:压缩图片。

使用方法:https://www.npmjs.com/package/image-webpack-loader

10、webpack-config.js配置文件:

context:默认为执行脚本的文件目录。

时间: 2024-10-13 16:53:19

webapck基础随手记的相关文章

微冷的雨Java基础学习手记(一)

使用Java理解程序逻辑 之凌波微步 船舶停靠在港湾是很安全的,但这不是造船的目的 北大青鸟五道口原玉明老师出品 1.学习方法: 01.找一本好书 初始阶段不适合,可以放到第二个阶段,看到知识点时,要进行验证 02.查看帮助文档和搜索引擎的使用 借助网络上的Blog文章 03.不要急功近利 不要抱着速成的想法,否则必然走弯路学习编程不是一蹴而就的事情付出的成本高,才能有一个高薪的收入 04.不要浮躁 不要什么都学,只学有用的 浮躁的程度和技术水平成反比的走自己的路,让别人去浮躁去吧! 每天问问自

CSS基础学习手记

-------------------------------------------------------------------------------------- 选择器 -------------------------------------------------------------------------------------- 标签选择器 <p>Hello,World!</p> ID选择器 <div id="topDiv">

java web 开发三剑客 -------电子书

Internet,人们通常称为因特网,是当今世界上覆盖面最大和应用最广泛的网络.根据英语构词法,Internet是Inter + net,Inter-作为前缀在英语中表示“在一起,交互”,由此可知Internet的目的是让各个net交互.所以,Internet实质上是将世界上各个国家.各个网络运营商的多个网络相互连接构成的一个全球范围内的统一网,使各个网络之间能够相互到达.各个国家和运营商构建网络采用的底层技术和实现可能各不相同,但只要采用统一的上层协议(TCP/IP)就可以通过Internet

随手记Swift基础和Optional Type(问号?和感叹号!)

距离Apple推出Swift已经有几天了,网上也时不时出现"急招Swift程序员,要求有一天工作经验"的帖子. 看到Swift,除了苹果放的另外一门语言的链接(http://swift-lang.org/),还可能联想到Taylor Swift,或者铃木雨燕. 这几天网上关于Swift的话题和材料应该迅速膨胀,比如StackOverflow的相关标签,还有知乎上的一些相关讨论. 关于Swift的推出,我个人觉得对现有的使用Objective-C的iOS开发者不算是很大的冲击,毕竟写代码

《Python核心编程》手记 基础

春节终于over了,回归充实的学习研究生活.打开久违的CSDN博客,看到官方推送的 『博客Markdown编辑器上线啦』,让我顿时有了写作的欲望,真是程序员的福利.之前阅读各种文章书籍,都是用MarkDownPad做的笔记,喜欢以及习惯于MarkDown简洁的语法. 总之各种方便.为了试试效果,将以前阅读<Python核心编程>的手记整理发上来,也当温习一遍. 第三章 Python基础 1.语句和语法 注释 Python中注释用符号"#",也可以用三引号:"' 注

Oracle 10g DataGuard手记之基础配置

DataGuard为企业数据的高可用性,数据安全以及灾难恢复提供支持,一般由一个primary db与几个物理或逻辑standby db组成一个DataGuard配置. 系统环境 操作系统为windows server 2003 r2 enterprise x64 edition service pack 2,database为oracle 10g 10.2.0.4 enterprise x64 edition.服务器均为AMD64架构,主机RAID5本地硬盘加RAID1光纤盘阵. primar

【共享单车】—— React后台管理系统开发手记:AntD Table基础表格

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.基础表格 Table组件基础Api bordered属性:是否展示外边框和列边框 columns属性:表格列的配置描述(即表头) dataSource属性:数据数组 pagination属性:分页器,设为 false 时不展示和进行分页 <Card title="基础表格"&g

Python网络爬虫学习手记(1)——爬虫基础

1.爬虫基本概念 网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.--------百度百科 简单的说,爬虫就是获取目标网页源代码,并提取和保存网页信息的自动化程序或者脚本.网络爬虫脚本或者程序一般包含如下几个步骤: A.获取网页源代码 爬虫首要的任务就是获取需要爬取的目标网页,也就是网页源代码,一般网页源代码就是一系列HTML代码 B.提取信息 得到了网页源代码后,接下来就是分析该HTML代码,按照一

【c++随手记】编程基础之输入输出

今天试了下noi oj的1.1节,随便总结一下. [cout左对齐右对齐的方法] 1 #include<iostream> 2 #include<cstdio> 3 #include<iomanip>//setw需要的头文件 4 using namespace std; 5 6 int main() 7 { 8 int a=1,b=23,c=456; 9 //scanf("%d%d%d",&a,&b,&c); 10 11 /*