React 实战 | 基于webpack配置react开发环境

最新推荐文章于 2021-06-17 17:02:43 发布

原创

最新推荐文章于 2021-06-17 17:02:43 发布 · 665 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #react

这篇博客介绍了如何手动使用webpack配置React开发环境，包括初始化项目文件夹、安装webpack和相关依赖、配置webpack的基本设置、创建源代码检验以及配置babel以支持JSX和ES6语法转换。

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

基于webpack配置react开发环境

之前只会用脚手架create-react-app来创建react项目，学习一下自己用webpack搭建react项目

一、初始化项目文件夹

创建一个项目文件夹，在命令行工具中切到该文件夹目录下，执行npm init进行初始化。文件夹下生成了package.json文件。
在文件夹下创建两个文件夹：

dist，用于放置编译后的代码
src，用于放置开发的源代码

在/src目录下新建index.html、index.css和index.js文件

二、安装webpack工具

安装开发环境依赖

npm install -D webpack webpack-cli

三、配置基本webpack

安装常用基本插件

  npm install -D html-webpack-plugin clean-webpack-plugin webpack-dev-server css-loader webpack-merge style-loader

在项目文件夹下创建文件 webpack.base.conf.js


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

  module.exports = {
   
   
      entry: './src/index.js',
      output: {
   
   
          filename: 'bundle.[hash].js',
          path: path.join(__dirname, '/dist'