从零搭建一个react项目

创建项目

1、新建一个文件夹，vsc打开；

2、打开终端；

3、输入npm init -y 快速初始化项目：多一个 package.json的文件夹；

4、项目根目录新建两个文件夹dist src，并在src新建index.html和一个index.js

5、终端输入cnpm i webpack -D回车；再输入cnpm i webpack -g：多一个node_modules文件夹；

6、终端输入cnpm i webpack-cli -D

7、在项目根目录新建一个webpack.config.js文件，输入

module.exports={

mode:'development'

}

终端输入：webpack回车进行打包（dist文件夹下面多了一个main.js文件）

注意：mode:"development"不会对代码进行压缩；

          mode:"production"会对代码进行压缩；

          默认的打包入口是src->index.js文件，也可以在mode下写entry:"入口路径"，自定义入口文件；

          默认打包输出文件是dist->main.js

8、index.html中输入<script src="/main.js"></script>

终端输入cnpm i webpack-dev-server -D

然后在package.json文件的scripts下写入：

"dev":"webpack-dev-server"

最后在终端输入npm run dev ：得到一个网址，在浏览器输入次网址；

结果：页面会根据代码变化，自动刷新；

9、在package.json的dev写成如下：

"dev":"webpack-dev-server --open --port 3000 --hot --progress --compress --host 127.0.0.1"

--open：输入npm run dev会自动打开网址；

--open firefox：自动打开火狐；

--port 3000：网址的端口号为3000；

--progress/--compress：浏览器打开的时候回进行压缩（作用不大）；

--host 127.0.0.1：打开域名为127.0.0.1

10、终端输入cnpm i html-webpack-plugin -D，

并且在webpack.config.js中输入如下：

const path =require('path');

const HtmlWebpackPlugin=require('html-webpack-plugin');//导入在内存中自动生成index页面的插件

//创建一个插件的实例对象

const htmlPlugin=new HtmlWebpackPlugin({

template:path.join(__dirname,"./src/index.html"),

filename:'index.html'

})

 

module.exports={

mode:"development",

// entry:"打包文件入口文件的路径，默认为src下的index.js"

plugins:[

htmlPlugin

]

}

再次运行