import语法引入的模块，在生产环境下会被自动忽略，自动tree-shaking

22、23

配置

webpack.config.js

可通过命令行更改默认配置文件名
image.png

也可以在package.json中的scripts中设置快捷命令

工具

webpack-dev-server

利用express静态服务，打包内存？并不能生成真实文件
image.png
想要加到build文件夹中可以在webpack.config.js中更改
image.png

loader

image.png

css-loader

解决css文件中的import

style-loader

解决向html中插入link到style，css文件的问题

less-loader

解决less转换css的问题
image.png

image.pnginsertAt可以将link标签插入到style的头部（不加默认尾部）

babel-loader

语法转化
image.png

image.png

es-lint

语法检验
image.png
需要配合image.png文件

file-loader

图片 加载 ，解决js文件中的import（非js文件）
image.png

image.png

expose-loader

向全局挂变量（webpack是node环境，默认无法挂在window上的属性和方法）

image.png

或者
image.png

或者使用webpack上的插件
image.png

插件

HtmlWebpackPlugin

image.png

image.png

?MiniCssExtractPlugin

image.png

image.png

clean-webpack-plugin

清除输出目录中的历史文件
image.png

image.png

copywebpackplugin

将xx目录拷贝到打包目录下
image.png
image.png

bannerplugin（内置）

版权声明
image.png

环境变量（区分生产、开发环境）

image.png

webpack-merge
image.png
image.png

多入口引入，产生多个html文件

image.png

html-webpack-plugin（loader）

image.png

ignore-plugin

image.png

image.png

source-map

image.png

watch

image.png

跨域处理

index.js中有请求，可以利用代理转发？
image.pngreWrite是将接口重置为初始状态

或者mock数据
image.png

或者服务端处理

image.png

？resolve

在那些文件夹中查找
image.png

noParse

image.png
可以加快打包速度

抽离代码块

image.png
老版本是commonChunkPlugin

懒加载

image.png

热更新

image.png

image.png

image.png