Webpack 多页面应用项目教程

Webpack 多页面应用项目教程

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

webpack-multi-page/
├── build/
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── src/
│   ├── assets/
│   ├── components/
│   ├── pages/
│   │   ├── home/
│   │   └── about/
│   ├── styles/
│   └── index.js
├── .babelrc
├── .gitignore
├── package.json
└── README.md

• build/: 包含Webpack的配置文件，分为基础配置、开发环境配置和生产环境配置。
• src/: 源代码目录，包含静态资源、组件、页面、样式和入口文件。
  • assets/: 存放静态资源，如图片、字体等。
  • components/: 存放可复用的React组件。
  • pages/: 存放各个页面的具体实现。
  • styles/: 存放全局样式文件。
  • index.js: 项目的入口文件。
• .babelrc: Babel配置文件，用于转换ES6+代码。
• .gitignore: Git忽略文件配置。
• package.json: 项目依赖和脚本配置。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

项目的启动文件是src/index.js，它是整个应用的入口点。以下是该文件的基本结构：

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

• 引入React和ReactDOM库。
• 引入全局样式文件。
• 渲染App组件到根DOM节点。

3. 项目的配置文件介绍

基础配置文件 (build/webpack.base.conf.js)

基础配置文件定义了Webpack的基本配置，包括入口、输出、模块解析规则等。

const path = require('path');

module.exports = {
  entry: {
    app: './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'js/[name].[hash].js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json']
  }
};

开发环境配置文件 (build/webpack.dev.conf.js)

开发环境配置文件继承自基础配置文件，并添加了开发服务器和热模块替换等配置。

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.conf');

module.exports = merge(baseConfig, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    hot: true
  }
});

生产环境配置文件 (build/webpack.prod.conf.js)

生产环境配置文件继承自基础配置文件，并添加了代码压缩和优化等配置。

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.conf');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = merge(baseConfig, {
  mode: 'production',
  optimization: {
    minimizer: [new TerserPlugin()]
  }
});

以上是Webpack多页面应用项目的基本教程，涵盖了项目的目录结构、启动文件和配置文件的介绍。希望对你有所帮助！