reactjs--创建webpack框架

react核心
虚拟dom（用js写出来的结构）---diff对比算法
1.利用node语法--npm init -y 快速初始化项目（创建基本的webpack项目版本4.x
）
第一步创建完后，会出现一个package.json ,用来存放包记录，是个配置文件

2.手动创建src,存放代码，同级创建dist(或者build),用来 存放发布的项目

3.src-index.html文件--小技巧快捷键生成html代码--感叹号!+tab键

4.src-main.js--入口文件

5. CLS——cls清屏幕命令 1功能:清除屏幕上的所有显示,光标置于屏幕左上角。

5.控制终端-cnpm(国内阿里下载 镜像，比npm快点，当然npm自己配置也是一样的)
安装webpack

6.运行 cnpm i webpack -D 或者全局运行 npm i cnpm -g
第六步这个配置不好以后的命令行会报错，错误为webpack : 无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包 括路径，请确保路径正确，然后再试一次。
解决办法：
全局安装webpack
npm install -g webpack
把node_global加入到环境变量

我的解决办法是：

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack"
1）找到项目根目录下的package.json文件并打开，找到"scripts":{}这一段，在其中添加"dev": "webpack"这一行，效果如下：??? 2）命令行中输入“npm run dev”命令，顺利执行
命令行中输入“npm run dev”命令，顺利执行webpack命令，将入口文件“src/index.js”打包（若是webpack.config.js中mode为production则自动压缩，否则不压缩，webpack 4.x以前要压缩的话需要另外安装组件并做相应配置，webpack 4.x仅需一个配置项即可压缩代码，赞！）并输出到“dist/main.js”
这是因为nodejs版本太低，或者说webpack版本太高，所以不兼容。然后我把webpack卸载掉，重新安装了2.6.1版本的webpack，问题解决：[root@FreeServer ~]# npm uninstall webpack -g
unbuild webpack@4.3.0
[root@FreeServer ~]# npm install webpack@2.6.1 -g --registry=https://registry.npm.taobao.org
[root@FreeServer ~]# webpack -v
2.6.1
[root@FreeServer ~]#

先全局安装webpack和webpack-cli
npm install webpack -g
npm install webpack-cli -g
再局部安装webpack和webpack-cli
npm install webpack --save-dev
npm install webpack-cli --save-dev
亲测有效~
cnpm i webpack-cli -D 脚手架-命令行工具-例如输入webpack直接打包

7.创建webpack.config.js--
//向外暴露一个打包的配置对象,node语法
module.exports = {
mode:''//development 开发者环境 production 产品环境打包部署
}

8.注意webpack4.x提供了约定大于配置
默认约定了，打包的入口是src->index.js
打包的输出文件是dist->main.js
当然，这些也是可以手动通过代码修改的

9.实时自动打包

全局安装
npm install webpack-dev-server
视频安装-局部安装webpack 根目录>cnpm i webpack -D
cnpm i webpack-dev-server -D
本地-安装：
npm install webpack-dev-server --save-dev
查看：webpack-dev-server -v

在package.json文件下添加
"dev":"webpack-dev-server"(在"scripts":{中添加})

运行脚本-npm run dev
webpack-dev-server 将打包好的main.js放到了内存中，所以在根目录原目录下的dist看不到

10.修改index.html
<script src="/main.js"></script>

终止操作 ctrl+c

 

转载于:https://www.cnblogs.com/fdxjava/p/11573115.html