react学习记录 ---- (三) 09.webpack 4.x最基本的使用步骤 10.关于node和chrome之间的关系

以下为基本教学--------- 非初学者可以直接跳过哦

创建一空白文件夹

1.vs code 打开  ---> 打开终端

初始化项目

输入: npm init -y 

 这一操作是为了创建package.json 配置文件

 

2. 在项目根目录创建src 源代码目录和dist产品目录

3. 在src文件夹中创建index.html

4. 在src中创建main.js   这是webpack打包入口文件

 5. 使用cnpm 安装 webpack  运行

cnpm i webpack-cli -D

    cnpm 安装教程

•         全局运行 npm  i cnpm -g

 安装完之后   直接输入  webpack 试一下

报错了哦

 

提示我们缺少对应配置文件  所以我们现在创建  webpack.config.js  （这是webpack的配置文件)

在其中输入如下

 发现编译成功了

 引入后执行  成功

webpack 4.x 提供了  

约定大于配置的概念； 目的是为了尽量减少 配置文件的体积

 

• 默认约定了

• 打包的入口是 src -> index.js

• 打包的输出文件是 dist -> main.js

• 4.x中新增了 mode选项（production 和 development） 该值是必填的

 

所以只要是chrome支持的特性 Node都可以支持   反而言之  chrome不支持的特性 Node都不支持