webpack-react初步-优快云博客

本文链接：https://blog.youkuaiyun.com/console__/article/details/106158860

本文详细介绍了一个基于React的应用从初始化到部署的全过程，包括使用cnpm进行项目初始化，安装必要的依赖包如css-loader、less-loader等，以及Webpack配置详解，实现css单独打包和图片资源的加载。

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

初始化

使用cnpm

初始化项目

cnpm init -y

安装依赖

cnpm install -D css-loader style-loader  less-loader
cnpm install -D file-loader 
cnpm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react 
cnpm install -D webpack webpack-cli webpack-dev-server 
cnpm install -D clean-webpack-plugin 
cnpm install -D html-webpack-plugin 
cnpm install react react-dom -S

创建文件

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>
    <div id="root"></div>
</body>
<script src="main.js"></script>

</html>

/src/index.js

import React from "react";
import ReactDOM from "react-dom";
import "./style.less"
class App extends React.PureComponent {
  render() {
    return (
      <div>
        <div className="title">你瞅啥</div>
        <img className="img" src={img} />
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

/src/style.less

.titile{
 font-size:20px
}

webpack.config.js

const path = require("path");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "development",
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [path.resolve(__dirname, "src")],
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
        },
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "file-loader",
            options: {},
          },
        ],
      },
      {
        test: /\.(css|less)$/,
        use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "less-loader" }],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin({removeFiles:["dist"]}),
    new HtmlWebpackPlugin({
        template: './index.html'
    }),
  ],
};

文件目录如下

├── index.html
├── package.json
├── src
│   ├── index.js
│   └── style.less
└── webpack.config.js

运行命令

npx webpack-dev-server

css 单独打包成文件

cnpm install mini-css-extract-plugin -D

配置后的文件

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");



module.exports = (env, argv) => {
  return {
    mode: argv.mode,
    entry: {
      app: `${__dirname}/src/index.js`,
    },
    output:{
        filename: 'index.js',
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          include: [path.resolve(__dirname, "src")],
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
        {
          test: /\.(png|jpg|gif)$/,
          use: [
            {
              loader: "file-loader",
              options: {},
            },
          ],
        },
        {
          test: /\.(css|less)$/,
          use: [
            { loader: MiniCssExtractPlugin.loader },
            { loader: "css-loader" },
            { loader: "less-loader" },
          ],
        },
      ],
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: `css/[name].[hash].css`,
        chunkFilename: `css/[id].[hash].css`,
      }),
      new HtmlWebpackPlugin({
        template: "./index.html",
        minify: {
          removeComments: true, //清除注释
          collapseWhitespace: true, //清理空格
        },
      }),
      new CleanWebpackPlugin({ removeFiles: ["dist"] }),
    ],
  };
};