简单介绍:

webpack是一个模块打包工具,给js准备的打包工具,可以把很多的模块打包成很少的文件

目标:

  1.切分依赖数,分到不同代码块里,按需加载,懒加 载
  2.任何静态资源都可以被视为一个模块,在项目中被引用
  3.整合第三方类库,把类库也视为它的模块,在项目中被引用
  4.初始化加载时间更少
  5.在整个打包过程中可以自定义
  6.适合做大型项目
特性:

代码分割,只加载所需文件,模块通过loaders插件系统处理各种文件,模块热更新

  处理过程:

把有各种依赖的文件通过webpack打包处理成css,js,图片文件

(文件夹dist:存放最终发布版本的代码
dev:开发者版本,开发包)

npm init:生成package.json,避免要手工生成

--save-dev:npm install 在安装 npm 包时,有两种命令参数可以把它们的信息写入 package.json 文件,一个是npm install --save另一个是 npm install --save-dev
           --save-dev 是你开发时候依赖的东西,--save 是你发布之后还依赖的东西。
      如果不使用–save/–save-dev安装模块的话需要手动更新package.json里的dependencies和devDepandencies,而使用–save/–save-dev就可以自动更新package.json了

webpack安装好后,在文件夹里新建一个js文件hello.js
命令行中在当前文件夹下输入webpack hello.js hello.bundle.js(每次写完依赖,命令行执行此句即可)

输出的内容:
Asset:打包生成的文件名称;Size:打包生成的文件的大小;Chunks:这次打包的分块;Chunk Name:这次打包的块名称

在js里依赖加载文件word.js在文件头部写上:require('./word.js')
依赖css文件:require('style-loader!css-loader!./style.css')需要安装loader (npm install css-loader style-loader --save-dev)

--module-bind:模块绑定 --module-bind 'css=style-loader!css-loader'
--watch:这个可以自动更新更改过的代码,无需每次更改代码后都在命令行里敲上文件
--progress打包过程,有百分比进度显示
--display-module:引用的所有模块都列出来,包括引用的方式
--display-reasons:模块打包原因列出来

自己设置参数可以在wenpack.json文件里scripts属性里添加一段脚本,这个脚本可以是一段命令,如:
"webpack":"webpack --config webpack.config.js(定义config文件) --progress(看到打包过程) --display-modules(打包的模块) --colors(命令行里打包出来字的颜色是彩色的)"
然后命令行里输入npm run webpack

最新文章

  1. 50分钟学会Laravel 50个小技巧
  2. [Lintcode two-sum]两数之和(python,双指针)
  3. 从输入 URL 到页面加载完的过程中都发生了什么---优化
  4. 【PHP】将EXCEL表中的数据轻松导入Mysql数据表
  5. spring事务分类简述
  6. [每日一题] 11gOCP 1z0-053 :2013-09-29 Flashback Data Archive ...................................6
  7. flash Builder JSON使用实例
  8. lucas定理解决大组合数取模
  9. 【Hibernate步步为营】--映射合集汇总
  10. kafka知识体系-kafka设计和原理分析-kafka文件存储机制
  11. VS 2017 激活码
  12. Notepad++文件自动更新
  13. vue重要项目的参考
  14. 【winform】listbox 列表
  15. node.js 关于 async的使用
  16. CentOS 7 安装php5.6,Nginx,Memcached环境及配置
  17. Android网络功能之会话发起协议SIP
  18. numpy数组-标准化数据
  19. 图论-桥/割点/双连通分量/缩点/LCA
  20. RPC好,还是RESTful好?

热门文章

  1. linux 配置Apache 、PHP
  2. href="#" 的坑
  3. 初学c语言
  4. 关于非阻塞connnect的看法
  5. Java编程思想总结笔记Chapter 2
  6. Nodejs cluster模块深入探究
  7. docker~写个容器启动的bash脚本
  8. STK卫星工具箱下载
  9. 第三篇:RESTful介绍
  10. Spark ML下实现的多分类adaboost+naivebayes算法在文本分类上的应用