Skip to content

wenyuan/webpack-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Webpack Template

这是一份 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

最基础的依赖。

Babel

Babel 用于将 ES6+ 语法编写的代码转换为向后兼容的 JavaScript 语法。

Loaders

专门用来处理那些非 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 且做了优化。

Plugins

版权信息

MIT

Copyright (c) 2021-present, WenYuan

鸣谢

本项目借鉴了 GitHub 上一个不错的项目,并根据实际需求做了一些调整。

以下是我参考的仓库:

Releases

No releases published

Packages

No packages published