webpack
加载网页的各种资源速度太慢需要把资源合并打包,webpack是一个解决这种问题的项目构建工具。
安装
1.运行npm i webpack -g
全局安装webpack ,这样就能在全局使用webpack的命令
或者2.在项目根目录中运行npm i webpack --save-dev
安装到项目依赖中
基本使用
通常我们会在src
源代码目录下新建main.js
作为所有引用js文件的入口,但是这样的入口通常会使用一些先进的ES6语法,浏览器可能识别不了,这个时候可以使用webpack进行转换并丢到dist
版本实现中,然后再在主页中引用转换出来的JS文件
webpack --mode production src/main.js --output-filename app.bundle.js --output-path dist
4.0以后需要写 --output-filename和–output-path
默认的打包模式为production生产环境模式,所以为了减少文件体积,压缩成了一行。
要设置成可读性好的怎么办?将mode变为development开发环境即可。
即webpack
- 能够处理JS文件的相互依赖关系
- 能够处理JS的兼容问题,把高级的,浏览器不识别的语法,转换为低级的能识别的语法
webpack.config.js
当运行webpack
指令时,webpack会自动到该目录下找webpack.config.js
文件并按其中的出入口进行代码关联更新
监听代码修改webpack-dev-server自动打包
运行cnpm i webpack-dev-server -D
把这个工具安装到项目的本地开发依赖
因为他只是一个本地组件无法当指令运行
所以需要配置package.json
文件
然后运行npm run dev
如果报错
运行cnpm install webpack webpack-dev-server webpack-cli --save-dev
后npm run dev
成功
但是这时候的bundle.js
文件在localhost:8080
的根目录上,这个时候打包生成的bundle.js
并没有存放到实际的物理磁盘上而是直接托管电脑的内存中(这样做快速),所以
<script src="/bundle.js"></script>
针对package.json的配置
--open firefox
打开火狐浏览器
--port 3000
使用3000端口
--contentBase src
默认打开src目录中的主页
--hot
热刷新(
- 会生成一个补丁json文件进行刷新
- 触发代码变化后异步刷新页面
)
--progress
打包进度
--compress
压缩
--host 127.0.0.1
IP
针对webpack.config.json的配置
const path = require('path')
html-webpack-plugin
安装:cnpm i html-webpack-plugin -D
注意:它会自动把打包好的资源自动追加到内存页面中
webpack4.x
约定大于配置(减少配置文件体积)
默认打包路径 src下的index.js => dist下main.js
module.exports = {
mode:'development',//约定开发者模式
}