React-webpack——开发一个react项目所需准备

本文链接：https://blog.youkuaiyun.com/Tracy_frog/article/details/80087398

本文详细介绍如何从零开始搭建一个React项目，包括安装必要依赖、配置Webpack及Babel等工具，并提供了一个完整的目录结构示例。

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

npm init —生成package.json文件
安装依赖
- npm install –save react
- npm install –save react-dom
- npm install –save-dev webpack
- npm install –save-dev webpack-dev-server
- npm install –save-dev babel-core
- npm install –save babel-polyfill
- npm install –save-dev babel-loader
- npm install –save-dev style-loader css-loader
- npm install –save-dev file-loader
- npm install –save babel-runtime
- npm install –save-dev babel-plugin-transform-runtime
- npm install –save-dev babel-preset-es2015
- npm install –save-dev babel-preset-react
- npm install –save-dev babel-preset-stage-2
- npm install –save webpack-cli’
- npm install –save-dev node-sass//可以不加，相应的下面的配置中关于sass部分要删去
- npm install –save-dev sass-loader//可以不加
- npm install redux react-redux //不知道redux的可以不加
打开 package.json 然后添加下面的scripts:

“scripts”: {
“start”: “webpack-dev-server –hot –inline –colors –content-base ./build”,
“build”: “webpack –progress –colors”
}

配置webpack.config.js文件

在根目录下新建webpack.config.js文件，输入以下内容

```
var webpack = require('webpack');
module.exports = {
 entry: './src/app/index.js',
 output: {
     path: __dirname + '/build',
     filename: "bundle.js"
 },
 module: {
     rules: [{
         test: /\.js$/,
         exclude: /node_modules/,
         loader: 'babel-loader',
         query: {
             plugins: ['transform-runtime'],
             presets: ['es2015', 'react', 'stage-2']
         }
     }, 

     {
         test: /\.css$/,
         use:['style-loader','css-loader']
     },

     {
        test: /\.scss$/,
        use: [
            'css-loader',
            'sass-loader'
        ]
    },
    {
        test: /\.(png|svg|jpg|gif|mp4)$/,
        use: ['file-loader']
    }
    ]
 }
};
```