使用webpack配置正确的react项目

墨染丶倾城

于 2018-07-27 11:37:16 发布

阅读量1k

点赞数

分类专栏： react 文章标签： webpack react

本文链接：https://blog.youkuaiyun.com/weixin_40581330/article/details/81233489

版权

本文详细介绍了如何配置Webpack来支持React项目，包括Webpack的基本组成、如何新建配置文件、设置入口与出口、使用loader和plugins，以及如何引入CSS文件。同时，文章还指导了如何配置Babel以支持JSX语法，安装并配置react、react-dom和react-hot-loader实现热更新，最终成功运行显示'Hello World'的React应用。

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

webpack基于node，我的node版本：v8.1.2

使用webpack之前需要安装webpack和 webpack-dev-server两个命令环境

npm i webpack@3.6.0 -g
npm i webpack-dev-server@2.9.1 -g

npm info webpack 可以查看webpack版本信息

验证是否安装成功 webpack-dev-server -v

配置webpack:

1.新建webpack.config.js文件（可以使用命令新建文件 touch webpack.config.js ）

webpack组成

入口、出口
loader(加载器)
plugins(插件)

// webpack.config.js文件内容
module.exports={
    entry:'./index.js', // 入口文件，自己写的文件
        output:{
        filename:'bundle.js' // 出口文件，打包好的文件
    }
}

2.新建一个index.html 引入出口文件 <script src="bundle.js

最低0.47元/天解锁文章