当前位置 : 主页 > 网页制作 > html >

reactjs--创建webpack框架

来源:互联网 收集:自由互联 发布时间:2021-06-12
react核心 虚拟dom(用js写出来的结构)---diff对比算法 1.利用node语法 - - npm init -y 快速初始化项目(创建基本的webpack项目版本4.x ) 第一步创建完后,会出现一个package.json ,用来存放包记

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,问题解决:[[email protected] ~]# npm uninstall webpack -g
unbuild [email protected]
[[email protected] ~]# npm install [email protected] -g --registry=https://registry.npm.taobao.org
[[email protected] ~]# webpack -v
2.6.1
[[email protected] ~]#

先全局安装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

网友评论