webpack入门篇--1.简单介绍

简单介绍:

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

原文地址:https://www.cnblogs.com/chooper/p/7372635.html