通过一个小实例串联webpack+react的使用（入门篇）-优快云博客

本文介绍了一个使用webpack和React构建的项目结构与配置流程。详细解释了目录组织方式、依赖管理及webpack配置方法，使读者能够快速搭建起一个完整的React应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

底层建筑决定上层建筑，这是学习webpack的一些初步总结，配合react写了这么一个demo

目录构建如下

目录简要解析

src 目录是程序所有的源代码
common 程序的公共资源
component 页面中的组件，每个组件用一个文件夹包起来以便管理维护
dist 是通过webpack打包后的输出目录
assets 打包后存放公共资源的地方
index.html 用来引用资源的入口
app.js 打包的入口文件
data.js 一堆模拟数据
.babelrc babel的配置文件
postcss.config.js postcss的配置文件
webpack.config.js webpack的配置文件

开发依赖和生产依赖

文件名 package.json

开发依赖

"devDependencies": {
    "autoprefixer": "^8.1.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.3",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.10",
    "file-loader": "^1.1.9",
    "html-webpack-plugin": "^2.30.1",
    "postcss-loader": "^2.1.2",
    "style-loader": "^0.20.2",
    "url-loader": "^0.6.2",
    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.1"
},
复制代码

生产依赖

"dependencies": {
    "prop-types": "^15.6.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
}
复制代码

配置运行脚本

"scripts": {
    "dev": "webpack",
    "start": "webpack-dev-server"
}
复制代码

配置babel（解决js的兼容问题）

文件名 .babelrc

{
    "presets": ["env","react"]
}
复制代码

配置postcss（解决css的兼容问题）

文件名 postcss-loader

const Autoprefixer = require('autoprefixer')
module.exports = {
    plugins: [
        Autoprefixer()
    ]
}
复制代码

接下来就是配置webpack
之所以把webpack留到最后是为了方便阅读

文件名 webpack.config.js

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

module.exports = {
    entry: "./src/app.js",
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: "assets/js/main.js"
    },
    resolve: {
        // 设置模块默认路径
        modules: [
            "node_modules",
            path.resolve(__dirname,'src/common'),
            path.resolve(__dirname,'src/component')
        ]
    },
    // 配置本地开发服务器
    devServer: {
        open: true,
        port: 5552
    },
    plugins: [
        // 改变输出路径和文件名
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: "./src/index.html"
        }),
        // 如果是本地打包的话，每次都清空上一次编译好的文件
        new CleanWebpackPlugin()
    ],
    module: {
        rules:[{
                // 解析jsx和转换高版本的js
                test: /\.(js|jsx)$/,
                use: ["babel-loader"],
                include: [
                    path.resolve(__dirname,'src')
                ]
            },{
                // 引入样式
                test: /\.css$/,
                use: ["style-loader","css-loader","postcss-loader"],
                include: [
                    path.resolve(__dirname,'src')
                ]
            },{
                // 引入图片
                test: /\.(jpg|png|gif)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 3000,
                            name: "assets/img/[name].[ext]"
                        }
                    }
                ]
            }
        ]
    }
}
复制代码