Webpack Bundle 项目教程

Webpack Bundle 项目教程

webpack-bundleBundle to Integrate Webpack into Symfony项目地址:https://gitcode.com/gh_mirrors/we/webpack-bundle

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

webpack-bundle/
├── src/
│   ├── index.js
│   ├── utils.js
│   ├── common.js
│   ├── index.css
│   └── index.html
├── dist/
│   ├── main.js
│   ├── index.bundle.css
│   └── utils.bundle.js
├── webpack.config.js
├── package.json
└── README.md

• src/：包含项目的源代码文件。
  • index.js：项目的入口文件。
  • utils.js：包含一些工具函数。
  • common.js：包含一些公共函数。
  • index.css：项目的样式文件。
  • index.html：HTML 模板文件。
• dist/：包含打包后的文件。
  • main.js：主要的打包文件。
  • index.bundle.css：打包后的 CSS 文件。
  • utils.bundle.js：打包后的工具函数文件。
• webpack.config.js：Webpack 的配置文件。
• package.json：项目的依赖和脚本配置文件。
• README.md：项目的说明文档。

2. 项目的启动文件介绍

项目的启动文件是 src/index.js，它是 Webpack 打包的入口文件。以下是 index.js 的示例代码：

import './index.css';
const { log } = require('./common');

log('webpack');

在这个文件中，我们引入了 index.css 样式文件和 common.js 中的 log 函数，并在文件中调用了 log 函数。

3. 项目的配置文件介绍

项目的配置文件是 webpack.config.js，它包含了 Webpack 的打包配置。以下是 webpack.config.js 的示例代码：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    index: './src/index.js',
    utils: './src/utils.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].bundle.css'
    })
  ]
};

在这个配置文件中：

• entry：定义了打包的入口文件。
• output：定义了打包后的文件输出路径和文件名。
• module：定义了模块的加载规则，这里配置了 CSS 文件的加载器。
• plugins：使用了 MiniCssExtractPlugin 插件来抽离 CSS 文件。

通过这个配置文件，Webpack 会根据入口文件打包生成相应的 bundle 文件，并将 CSS 文件抽离成单独的文件。

webpack-bundleBundle to Integrate Webpack into Symfony项目地址:https://gitcode.com/gh_mirrors/we/webpack-bundle