webpack打包react项目

最新推荐文章于 2025-05-16 16:14:55 发布

_摩西_

最新推荐文章于 2025-05-16 16:14:55 发布

阅读量6.1k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/jasonzds/article/details/63326342

本文详细介绍如何使用webpack和React构建前端开发环境，包括安装配置流程及基本应用。

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

1webpack简介

webpack是目前最流行的打包工具之一，是一个为前端模块打包构建而生的工具，它既吸取了大量已有的方案优点和教训，也解决了很多前端开发过程中已有的痛点，如代码的拆分与异步加载，对非js资源的支持，强大的loader设计使得它更像是一个构建平台，而不是打包工具。

2webpack,react开发环境

1）新建一个项目文件夹,进入此文件夹，创建package.json文件(npm init命令)

2）确认已安装webpack,web pack-dev-server模块

3）安装babel（babel不懂的请先看http://blog.youkuaiyun.com/jasonzds/article/details/56685225）babel的目的有两个(将es6转为es5,转换jsx语法)，

4) 安装babel-preset-es2015和babel-preset-react

5）安装babel-loader和 babel-core

6）babel工作需要.babelrc文件

{
    "presets":["react","es2015"]
}

7)最重要的webpack.config.js文件的配置

var path = require('path');
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var ROOT_PATH = path.resolve(__dirname);
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
var APP_PATH = path.resolve(ROOT_PATH, 'app');

module.exports = {
    entry: {
        app: path.resolve(APP_PATH, 'app.js')
    },
    output: {
        path: BUILD_PATH,
        filename: '[name].bundle.js'
    },
    resolve:{
        extensions:['','.js','.jsx'],
        root:APP_PATH
    },
    module:{
        loaders:[
            {
                test: /\.js?$/,
                loaders: ['babel-loader'],
                include: APP_PATH
            }
        ]
    },
    plugins:[
        new HtmlwebpackPlugin({
            title: 'demo',
            filename:'index.html'
        }),
    ]
}

这个应该是最简单的配置了，不懂的可以网上搜，其中用到HtmlwebpackPlugin，

这个插件是帮我们自动生成html页面，并自动引入打包后的.js文件，其中的参数意思是，title这个页面的title，filename生成的页面名字

8）最后的项目文件目录为

app是项目组件文件夹，test是测试文件

list.js代码

import React from 'react';
import uuid from 'uuid';
import ListItem from '../listItem/listItem';

class List extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            items: []
        }
    }
    handleclick() {
        const value = this.refs.addlist.value;
        const str = {
            id: uuid.v1(),
            text: value
        }
        let items = this.state.items;
        items = [...items, str];//合并数值
        this.setState({
            items
        })
    }
    //删除其中的
    deleteItem(id) {
        this.setState({
            items: this.state.items.filter(
                result => result.id !== id
            ),
        });
    }
    render() {
        const ListIt = this.state.items.map(item => {
            return (
                <ListItem key={item.id} name={item} onDelete={this.deleteItem.bind(this)} />
            );
        });
        return (
            <div className="list">
                <input type="text" placeholder="请输入" ref="addlist" />
                <button className="addbutton" onClick={this.handleclick.bind(this)}>添加值</button>
                <ul>
                    {ListIt}
                </ul>
            </div>
        );
    }
}

export default List;

listitem.js

import React from 'react';

class ListItem extends React.Component {
    render() {
        const text = this.props.name;
        return (
            <li onClick={() => this.props.onDelete(text.id)}>
                <span>{text.text}</span>
            </li>
        )
    }
}

export default ListItem;

app.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import List from './list/list';

const app = document.createElement('div');
document.body.appendChild(app);
ReactDOM.render(<List />, app);

9）最后的package.json文件

{
  "name": "csdndemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --hot"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-react": "^6.23.0",
    "html-webpack-plugin": "^2.28.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.14.1"
  }
}