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

Posted 2020-10-03 Aqiaoba

webpack是一个模块打包工具，给js准备的打包工具，可以把很多的模块打包成很少的文件，特性:代码分割，只加载所需文件，模块通过loaders处理各种文件
　　       处理过程:把有各种依赖的文件通过webpack打包处理成css,js,图片文件
目标:1.切分依赖数，分到不同代码块里，按需加载，懒加 载
　　2.任何静态资源都可以被视为一个模块，在项目中被引用
　　3.整合第三方类库，把类库也视为它的模块，在项目中被引用
　　4.初始化加载时间更少
　　5.在整个打包过程中可以自定义
　　6.适合做大型项目
特性:代码分割，loader,插件系统，模块热更新

 

文件夹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