Webpack with Common Libs 项目教程

管翔渊Lacey

于 2024-09-10 10:10:15 发布

阅读量122

点赞数 2

本文链接：https://blog.csdn.net/gitblog_00984/article/details/142090068

版权

Webpack with Common Libs 项目教程

webpack-with-common-libswebpack with some common libraries项目地址:https://gitcode.com/gh_mirrors/we/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"
  }
}

通过以上配置，可以实现项目的打包和开发服务器的启动。

webpack-with-common-libswebpack with some common libraries项目地址:https://gitcode.com/gh_mirrors/we/webpack-with-common-libs

管翔渊Lacey

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
Webpack with Common Libs 项目教程

Webpack with Common Libs 项目教程 webpack-with-common-libswebpack with some common libraries项目地址:https://gitcode.com/gh_mirrors/we/webpack-with-common-libs 1. 项目目录结构及介绍webpack-with-common-libs/├── app/...
复制链接

扫一扫