webpack

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

1. 能够处理JS文件的相互依赖关系
2. 能够处理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热刷新（

1. 会生成一个补丁json文件进行刷新
2. 触发代码变化后异步刷新页面
   ）

--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',//约定开发者模式
}