Webpack的核心概念
Webpack要使用哪个模块作为构建项目的起点
默认为./src/index.js
output:出口,告诉Webpack在哪里输出它打包好的代码以及如何命名
默认为./dist
Module:模块,在Webpack里一切皆模块,一个模块对应着一个文件。Webpack会从配置的Entry开始递归找出所有依赖的模块。
Chunk:代码块,一个Chunk由多个模块组合而成,用于代码合并与分割。
Loader:模块转换器,用于把模块原内容按照需求转换成新内容。
Webpack如何配置多入口文件?
dependOn:当前入口所依赖的入口。它们必须在该入口被加载前被加载。
filename:指定要输出的文件名称。
import:启动时需加载的模块。
library:指定library选项,为当前entry构建一个library。
runtime:运行时chunk的名字。如果设置了,就会创建一个新的运行时chunk。在Webpack 5.43.0之后可将其设为false以避免一个新的运行时chunk。
publicPath:当该入口的输出文件在浏览器中被引用时,为它们指定一个公共URL地址
常用loader
css-loader读取合并CSS文件
style-loader把CSS内容注入到JavaScript里
sass-loader解析sass文件(安装sass-loader,node-sass)
postcss-loader自动添加浏览器兼容前缀(postcss.config配置)
url-loader将文件转换为base64 URI。
vue-loader处理vue文件。
常见Plugins
HtmlWbpackPlugin自动在打包结束后生成html文件,并引入bundle.js
cleanwebPackPlugin打包自动删除上次打包文件