这是一份 Webpack5 的通用模板。
git clone https://github.com/wenyuan/webpack-template.git
cd webpack-template/
npm install
npm run serve
开发环境下服务器将运行在 localhost:8080
。
npm run build
注意: 需要全局安装 http-server 来部署一个简易的 http 服务器。
npm install http-server -g
通过在 dist
目录中创建一个服务器来查看打包后的页面效果。
cd dist/ && http-server
这份通用模板用到的依赖包及具体用途如下:
下述依赖包均是通过
npm install <package-name> --save-dev
进行安装的。
最基础的依赖。
webpack
:包含 Webpack 核心内容webpack-cli
:包含 Webpack 操作的常见命令webpack-dev-server
:Webpack 的开发服务器webpack-merge
:提供合并函数,用于合并配置文件
Babel 用于将 ES6+ 语法编写的代码转换为向后兼容的 JavaScript 语法。
@babel/core
:包含 Babel 转换的核心 API@babel/preset-env
:Babel 的默认设置,包含最近的 JavaScript 语法转换规则
专门用来处理那些非 JavaScript 文件的工具(Webpack 默认只能识别 JavaScript),将这些资源翻译成 Webpack 能识别的资源。
- 转换 JS
babel-loader
:用来转换 ES6+ 语法,需要创建一个.babelrc
配置文件
- 处理 CSS
css-loader
:负责遍历 CSS 文件,将 CSS 转化为 CommonJS(将 CSS 输出到打包后的 JS 文件中)style-loader
:负责把包含 CSS 内容的 JS 代码,挂载到页面的 style 标签中
- 处理 LESS
less
:安装 Less.js,使项目支持 LESS 语法less-loader
:负责将 Less 编译为 CSS
- 处理 CSS 浏览器兼容性
postcss-loader
:CSS 语法识别,需要创建一个postcss.config.js
配置文件postcss-preset-env
:在postcss.config.js
配置文件中添加的插件,用于为 CSS 语法添加浏览器兼容性的前缀。该插件集成了 autoprefixer 且做了优化。
clean-webpack-plugin
:每次打包之前,先删除输出目录中的历史文件(保证输出目录中的打包文件是最新的)copy-webpack-plugin
:不需要处理的其他文件,可以直接复制到输出目录html-webpack-plugin
:用于从模板创建 HTML 文件,创建的 HTML 文件默认引入打包后的所有资源文件mini-css-extract-plugin
:抽离 CSS 到独立的文件css-minimizer-webpack-plugin
:优化和压缩 CSS(跟optimize-css-assets-webpack-plugin
一样,但有一些优势)
Copyright (c) 2021-present, WenYuan
本项目借鉴了 GitHub 上一个不错的项目,并根据实际需求做了一些调整。
以下是我参考的仓库: