欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-06-04 10:58:35
...

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

  1. 新建一个文件夹
  2. 运行 npm init 命令生成一个package.json文件
  3. 在package.json里面配置如下项目入口文件
    // 配置入口文件
"main": "index.js",
  4. 建议先安装 npm install cnpm -g --registry=https://r.npm.taobao.org, 然后使用cnpm安装我们需要的依赖包，因为使用npm install安装实在是太慢了。。。
  5. cnpm install react react-dom --save
  6. cnpm install babel-core babel-loader babel-preset-es2015 babel-preset-react webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
  7. 在项目跟文件夹下创建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'
                	]
            	}
        	}
    	]
	}
}
  8. 在项目跟文件夹下创建一个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"));
  9. 在package.json文件里面加如下配置
      "scripts": {
	"start": "webpack",
	"start-dev": "webpack-dev-server"
	},
  10. 运行npm run start-dev命令启动项目，最后会看到 Compiled successfully. 表示项目成功运行，在浏览器访问项目运行下的端口号，例如：http://localhost:8080/
  11. 最后附上完整的代码路径在gitee上. 链接:Webpack-Base
相关标签： Webpack 手动React

上一篇： Add Binary

下一篇： mysql中的数据库操作

推荐阅读