使用Webpack手动构建一个简单的React项目

最新推荐文章于 2022-11-06 02:57:28 发布

weixin_45667876

最新推荐文章于 2022-11-06 02:57:28 发布

阅读量144

点赞数

文章标签： Webpack 手动React

本文链接：https://blog.csdn.net/weixin_45667876/article/details/101086148

版权

                    
                        
                    
                    使用Webpack手动构建一个简单的React项目 
 
新建一个文件夹
运行 npm init 命令生成一个package.json文件
在package.json里面配置如下项目入口文件// 配置入口文件
"main": "index.js",
 
建议先安装 npm install cnpm -g --registry=https://r.npm.taobao.org, 然后使用cnpm安装我们需要的依赖包，因为使用npm install安装实在是太慢了。。。
安装react相关依赖包 cnpm install react react-dom --save
安装babel,webpcak相关依赖包cnpm install babel-core babel-loader babel-preset-es2015 babel-preset-react webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
在项目跟文件夹下创建wenpack.config.js文件,并做如下配置：const path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports={
	entry: './src/index.js',
	output: {
   		path: path.resolve('dist'),
    	filename: 'bundle.js'
	},
	mode: 'development',
	plugins: [
    	new HtmlWebpackPlugin({
        	template: './src/index.html',
        	hash: true
    	})
	],
	module:{
    	rules: [
        	{
            	test: /\.js$/, 
            	exclude: /node_modules/, 
            	loader: 'babel-loader',
            	options: {
                	presets: [
                    	'es2015',
                    	'react'
                	]
            	}
        	}
    	]
	}
}
 
在项目跟文件夹下创建一个src文件夹，放index.html和index.js文件
 index.html文件<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<div id="app"></div>
	<script src="bundle.js"></script>
</body>
</html>
 index.js文件import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component{
	render(){
    	return <h1>Hello World</h1>
	}
}

ReactDOM.render(<App />, document.getElementById("app"));
 
在package.json文件里面加如下配置  "scripts": {
	"start": "webpack",
	"start-dev": "webpack-dev-server"
	},
 
运行npm run start-dev命令启动项目，最后会看到 Compiled successfully. 表示项目成功运行，在浏览器访问项目运行下的端口号，例如：http://localhost:8080/
最后附上完整的代码路径在gitee上. 链接: Webpack-Base

                

weixin_45667876

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Webpack手动构建一个简单的React项目

使用Webpack手动构建一个简单的React项目新建一个文件夹运行 npm init 命令生成一个package.json文件在package.json里面配置如下项目入口文件// 配置入口文件"main": "index.js",建议先安装 npm install cnpm -g --registry=https://r.npm.taobao.org, 然后使用cnpm安装我...
复制链接

扫一扫