react项目搭建和启动

华彦發表於 2020-1-19 15:16:00

1.全局安装webpack
<div class="cnblogs_code">
<pre>npminstallwebpack</pre>
</div>
然后在启动的时候就会报错
 
 
<img src="https://img2018.cnblogs.com/i-beta/911380/202001/911380-20200119113105082-97031625.png" alt="">
 
 
 改成带上版本号就不会报错
<div class="cnblogs_code">
<pre>npminstallwebpack@3.5.5 -g--unsafe-perm</pre>
</div>
2.创建package.json文档
 .首先新建文件reactWebpacke（这个名字自己随便取），然后在此文件执行下面代码
<div class="cnblogs_code">
<pre>npm config set registry https://registry.npm.taobao.org  npm init</pre>
</div>
然后一路next下去如下面图片
<img src="https://img2018.cnblogs.com/i-beta/911380/202001/911380-20200119100944204-1123878032.png" alt="">
 
 
 项目文件夹中会出现一个文件package.json
<img src="https://img2018.cnblogs.com/i-beta/911380/202001/911380-20200119101039418-381094315.png" alt="">
 
 
 2.安装react, react-dom, webpack
<div class="cnblogs_code">
<pre>npm install react react-dom --save npm install webpack --save-dev npm install webpack-cli --save-dev </pre>
</div>
3. webpack.config .js 配置文件
 在项目的根目录下面创建一个webpack.config.js 文件。同时创建一个src文件夹，用来存放源文件。 下面是项目整体文件夹结构：
 
 
 <img src="https://img2018.cnblogs.com/i-beta/911380/202001/911380-20200119113613899-102599554.png" alt="">
 
 
 webpack.config.js 配置内容及说明：
<div class="cnblogs_code">
<pre>var path=require('path');

module.exports = {

entry:'./src/app.js', //入口文件配置为app.js文件。若入口文件为index.js,这里可以直接写成'./src'
//入口文件很多的话，可以写成下面的格式：
/*
entry:{
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
*/
output: {
filename:'bundle.js',//js合并后的输出的文件，命名为bundle.js
path:path.resolve(__dirname,'build'),//指令的意思是：把合并的js文件，放到根目录build文件夹下面
//publicPath:'',生成文件的公共路径，‘/work/reactweb/dist’ 生产环境下所有的文件路径将会添加这个公共路径
}
//多个入口的输出文件格式
/*
output: {
filename:'.js',//name相当于变量，等同于pageOne/pageTwo/pageThree
path:path.resolve(__dirname,'build'),//
}
*/
}</pre>
</div>
在src文件夹下面，新建一个app.js
<div class="cnblogs_code">
<pre>var app=document.createElement("div");
app.innerHTML='<h1> Hello World!</h1>';
document.body.appendChild(app);</pre>
</div>
在src下面创建index.html，并引入bundle.js文件
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
 <title>reactwebpack</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

 <script src="../build/bundle.js"></script>
</body>
</html> </pre>
</div>
4.安装webpack 本地包
<div class="cnblogs_code">
<pre>npm install webpack –save-dev</pre>
</div>
安装成功后，直接敲webpack，若成功将会显示下面内容，并且build文件夹下面将会生成bundle.js
<img src="https://img2018.cnblogs.com/i-beta/911380/202001/911380-20200119114102403-1402510626.png" alt="">
 
 注意：在wscode中会报错如下
<img src="https://img2018.cnblogs.com/i-beta/911380/202001/911380-20200119142141688-1764471661.png" alt="">
 
解决方法：
（1）.管理员身份打开
<img src="https://img2018.cnblogs.com/i-beta/911380/202001/911380-20200119142628591-1624683153.png" alt="">
 
（2）.输入set-ExecutionPolicy RemoteSigned
<img src="https://img2018.cnblogs.com/i-beta/911380/202001/911380-20200119151412629-1224745243.png" alt="">
 
（3）.选择Y 或者A ，就好了

</div>
<div id="MySignature" role="contentinfo">
记下点滴，等老了慢慢欣赏 
来源：https://www.cnblogs.com/binmengxue/p/12213817.html

頁: [1]

琼殿技术论坛's Archiver

react项目搭建和启动