Webpack with Common Libs 项目教程
1. 项目目录结构及介绍
webpack-with-common-libs/
├── app/
│ └── ...
├── web_modules/
│ └── ...
├── .gitignore
├── Gruntfile.js
├── LICENSE
├── README.md
├── bootstrap.html
├── gulpfile.js
├── index.html
├── jquery.html
├── package.json
├── react.html
└── webpack.config.js
目录结构介绍
- app/: 存放应用程序的主要代码文件。
- web_modules/: 存放Web模块相关的文件。
- .gitignore: Git忽略文件配置。
- Gruntfile.js: Grunt任务配置文件。
- LICENSE: 项目许可证文件。
- README.md: 项目说明文档。
- bootstrap.html: Bootstrap库的示例文件。
- gulpfile.js: Gulp任务配置文件。
- index.html: 项目的主入口HTML文件。
- jquery.html: jQuery库的示例文件。
- package.json: 项目的依赖和脚本配置文件。
- react.html: React库的示例文件。
- webpack.config.js: Webpack配置文件。
2. 项目的启动文件介绍
index.html
index.html
是项目的启动文件,包含了基本的HTML结构和一些常用的库(如Bootstrap、jQuery、React等)的示例代码。启动项目时,浏览器会首先加载这个文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack with Common Libs</title>
</head>
<body>
<h1>Webpack with Common Libs</h1>
<!-- 其他内容 -->
</body>
</html>
3. 项目的配置文件介绍
webpack.config.js
webpack.config.js
是Webpack的配置文件,定义了项目的打包规则、入口文件、输出路径等。
module.exports = {
entry: './app/index.js', // 入口文件
output: {
path: __dirname + '/dist', // 输出路径
filename: 'bundle.js' // 输出文件名
},
module: {
rules: [
// 模块加载规则
]
},
plugins: [
// 插件配置
]
};
package.json
package.json
是项目的依赖和脚本配置文件,包含了项目的依赖包、脚本命令等信息。
{
"name": "webpack-with-common-libs",
"version": "1.0.0",
"description": "Webpack with common libraries",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"dependencies": {
"webpack": "^5.0.0",
"webpack-dev-server": "^4.0.0"
}
}
通过以上配置,可以实现项目的打包和开发服务器的启动。