Webpack 训练项目教程

秋泉律Samson

于 2024-08-30 09:35:33 发布

阅读量231

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00249/article/details/141707126

版权

Webpack 训练项目教程

webpack-training-projectA training project for learning Webpack optimizations项目地址:https://gitcode.com/gh_mirrors/we/webpack-training-project

1. 项目的目录结构及介绍

webpack-training-project/
├── package.json
├── package-lock.json
├── webpack.config.js
├── /dist
│   └── main.js
│   └── index.html
├── /src
│   └── index.js
├── /node_modules
├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
└── /helpers
    └── check-app-config.js
    └── save-github-token.js

package.json: 项目的配置文件，包含依赖、脚本等信息。
package-lock.json: 锁定依赖版本的文件。
webpack.config.js: Webpack 的配置文件。
dist: 打包后的文件存放目录。
src: 源代码目录。
node_modules: 依赖包存放目录。
.babelrc: Babel 配置文件。
.gitignore: Git 忽略文件配置。
LICENSE: 项目许可证。
README.md: 项目说明文档。
helpers: 辅助脚本目录。

2. 项目的启动文件介绍

package.json:

{
  "scripts": {
    "prod:build": "npm run check-app-config && cross-env NODE_ENV=production webpack",
    "prod:server": "http-server public",
    "dev:server": "npm run check-app-config && webpack-dev-server",
    "check-app-config": "node /helpers/check-app-config.js",
    "token": "node /helpers/save-github-token.js"
  }
}

prod:build: 生产环境打包命令。
prod:server: 生产环境服务器启动命令。
dev:server: 开发环境服务器启动命令。
check-app-config: 检查应用配置的命令。
token: 保存 GitHub 令牌的命令。

3. 项目的配置文件介绍

webpack.config.js:

// webpack.config.js 示例配置
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

entry: 入口文件。
output: 输出配置。
module: 模块加载规则。
plugins: 使用的插件。

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

webpack-training-projectA training project for learning Webpack optimizations项目地址:https://gitcode.com/gh_mirrors/we/webpack-training-project