Webpack 5 Boilerplate 使用教程

最新推荐文章于 2024-09-24 09:46:32 发布

梅研芊

最新推荐文章于 2024-09-24 09:46:32 发布

阅读量364

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00780/article/details/141589954

版权

Webpack 5 Boilerplate 使用教程

webpack-boilerplate📦 ‎ A sensible webpack 5 boilerplate.项目地址:https://gitcode.com/gh_mirrors/we/webpack-boilerplate

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

webpack-boilerplate/
├── src/
│   ├── index.js
│   ├── styles/
│   │   ├── main.scss
│   ├── index.html
├── dist/
├── webpack.config.js
├── package.json
├── README.md

src/: 源代码目录，包含项目的所有源文件。
- index.js: 项目的入口文件。
- styles/: 存放样式文件的目录。
  - main.scss: 主样式文件。
- index.html: 项目的HTML模板文件。
dist/: 打包后的文件目录，包含最终生成的文件。
webpack.config.js: Webpack配置文件。
package.json: 项目的依赖和脚本配置文件。
README.md: 项目说明文档。

2. 项目的启动文件介绍

`src/index.js`

这是项目的入口文件，负责引入和初始化项目所需的所有模块和样式。

// src/index.js
import './styles/main.scss';
// 其他模块引入

`src/index.html`

这是项目的HTML模板文件，Webpack会根据这个模板生成最终的HTML文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webpack Boilerplate</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

3. 项目的配置文件介绍

`webpack.config.js`

这是Webpack的主要配置文件，包含了项目的各种配置选项。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[contenthash].js',
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

entry: 指定项目的入口文件。
output: 指定打包后的文件输出路径和文件名。
module: 配置各种加载器，处理不同类型的文件。
plugins: 配置各种插件，如清理插件和HTML生成插件。
devServer: 配置开发服务器，方便开发调试。

以上是基于 https://github.com/taniarascia/webpack-boilerplate.git 项目的使用教程，包含了项目的目录结构、启动文件和配置文件的详细介绍。

webpack-boilerplate📦 ‎ A sensible webpack 5 boilerplate.项目地址:https://gitcode.com/gh_mirrors/we/webpack-boilerplate