基于webpack4.x构建一个基本的React目录结构(不使用脚手架)

1.第一步，编译器打开新建的项目文件夹，运行 npm init -y 快速初始化项目，然后在项目的文件夹下会生成一个 package.json 文件，将来项目所装过的包都会在该文件里面进行记录

2.第二步，建目录，新建一个 src 目录，里面存放所有的项目源代码。然后再新建一个 dist 目录，差不多等同于 build ，但是依照标准的项目结构的话，应该是 dist ，项目做好之后要发布一个产品，并最终会发布到 dist 目录中。

3.在src目录下新建 index.html文件，项目的首页。其次，在 webpack4 之前的版本，这是应该新建一个 main.js 文件，作为 webpack 的打包入口文件，但是在4.x版本中，

4.使用 cnpm 安装 webpack 使用命令 cnpm i webpack -D          使用 cnpm i -g webpack 全局安装 webpack ，这里注意，如果不是使用全局安装的话，在项目的根目录下面会出现 node_modules 文件夹，里面包含 webpack 及其依赖包，在装其他的包的时候同理 

　　.安装 cnpm   全局运行 npm i cnpm -g 安装    cnpm 的命令和 npm 是完全相同的

 在 webpack4 之前的版本，打包功能和命令行工具是由 webpack 这个包来提供的。但是，在4.x版本中，webpack 把打包功能和命令行的功能拆分开来了。将命令行工具改变为由 cli 提供，也就是说，webpack4.x的版本，只安装一个 webpack 的包是不够的，还需要再安装一个 webpack-cli 的包  使用命令 cnpm i webpack-cli -D 安装    cli 是脚手架，同时4.x的命令行功能也由cli来提供。

 

 

 此时，运行 webpack 命令会报错，因为没有配置 webpack 的配置文件，该配置文件是一个Js文件。

5.新建 webpack.config.js 文件

 

 

 在此处，不能够使用 export default 导出，因为 webpack 是基于Node 构建的，所以应该使用Node的语法，向外暴露一个打包的配置对象，而 export default 是 Es6 里向外导出模块的 Api 。当在终端中运行 webpack 打包命令时，webpack 就会到目录结构中寻找  webpack.config.js 文件，然后执行该文件，由于该Js文件向外暴露一个对象，所以 webpack 就拿到了这个对象。

另外，再提一句，webpack 和 chrome 只支持一部分的 Es6 特性，而 Babel 则支持全部的 Es6 Es7 语法和特性。因为 Babel 是一个转换器，他会把那些浏览器不识别的高级的 Api 和语法转换成低级的浏览器可以识别的 api 和语法

 

 

 配置环境，development 是指开发环境，而 production 是指产品环境。这里选择开发环境，再次进行打包. mode是4.x新增的，之前的版本没有的选项，且 mode 是必选项！

 

 

 这里仍旧会报错，意思为 webpack 没有找到入口文件，但是我们已经在 src 下配置了main.js ,为什么无法找到呢？

在 webpack4 以前的版本中，需要配置 entry 的文件名来解决，这里就不详细讲了，可以在我的另一篇关于 webpack4 之前的版本的文章中详细讲解。但是，在4.x 之后的版本中就可以不用配置entry 了。

在 webpack4.x 中，有一个很大的特性，就是 约定大于配置   约定，默认的打包入口文件是 src -> index,js.有这个文件之后就可以不用再写 entry 了

提供 约定大于配置 的概念的目的是，尽量减少配置文件的体积。

　　1.默认约定了 打包的入口文件是 src-> index.js

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

将 main.js 重命名为 index.js ,重新运行 webpack 打包，即可成功打包     这里运行 webpack 可能会报错，报错的话，使用 npx webpack 打包即可(这里应该是 全局安装的问题，webpack 应该全局安装)

 

 

 这时会发现，dist 文件夹下面多了一个 main.js 文件

 

 

 这里提一句，当我们的环境选择的是 development 开发环境时，打包生成的 main,js 是没有压缩的。但是，当选用的是 production 产品环境时，打包生成的 main.js 时被压缩过的。 

此时的配置，当你每次修改代码，都得手动打包一次才能刷新，太麻烦了。所以得配置实时的打包编译。这是得用到 webpack-dev-serve

使用命令    cnpm i webpack-dev-serve -D 来安装

然后在 packafe.json 中配置 dev   配置好 dev 之后，只要运行 npm run dev 即可重新打包项目，而且打包完成后并不会推出，会等待项目发生变化，实时打包编译

-------------------------------------------------------------------------------分割线------------------------------------------------------------------------------

 

 

 Project is running at     说明该项目正运行在本机的8080端口

webpack output(file) is Served from /       webpack 的输出文件正在被托管于项目的根目录(/)，即在 http://llocalhost:8080/main.js 可以访问得到，可以理解为 进入 localhost:8080 就是进入到了根目录

但是，进入 localhost:8080 中，却并没有 main.js 文件的存在，这是为什么呢？

这是因为 webpack-dev-serve 打包好的 main.js 时托管到了内存中，并没有放到对应的物理磁盘上。所以在项目的根目录中看不到。

但是，我们可以假装认为 在项目的根目录中，有一个看不见的 main.js  ,我们可以引用它。

 

 设置 打包完成自动打开浏览器

 

 --open 自动打开浏览器     --port 修改端口号，默认为localhost:8080 端口，3000即为修改后的端口号         --hot (忘了是啥来着 )                                   --progress 打包进度         --compress 压缩，在走网络传输数据的时候进行压缩       

--host 127.0.0.1 修改打包后运行的域名         --open firefox 配置打包完成后打开哪个浏览器，在open后写相应的参数就可以了

 

提醒，文件是保存在硬盘中的，编辑器只是用来操作文件的

为什么将 main.js 托管到内存中呢，处于性能的考虑，这是因为内存的读取速度是最快的。其次，每次保存文件，都得访问文件，如果放在硬盘中的话，不仅访问速度慢，而且会损伤硬盘。

由于 main.js 被托管到了内存中，所以，我们也考虑把 index.html (首页)也托管到内存中去，这时需要借助 html-webpack-plugin

使用 cnpm i html-webpack-plugin -D 来安装

首先 在 webpack.config.js 中引入这个插件

 

 然后，在配置文件中创建一个 plugins 节点 ，然后在节点中 new 这个插件，把他当作构造函数来 new ,所以在节点的外部 new ,也是一样的

 

template 根据谁生成你的模板，源文件

filename 生成的内存中首页的名称

 

 path.join(--dirname,'./src/index.html')       path.join 来拼接路径     --dirname 代表当前文件所处的那层目录

而且，这个 htmlplugin 插件，会自动把打包好的 main.js 文件引入到页面上去（即放到 index.html 中）

 

 第一个引入的 main.js 是手动引入的，最后面的那个是 插件自动引入的，把自己写的删掉就可以了

其实，打包的本质就是，webpack 从入口文件（index.js）开始，将项目打包，然后将打包好的输出文件 main.js 自动挂载（没有插件的话，需手动挂载）到 index.html 上，进行页面的显示。所以这就是 index.html 的作用，进行页面的显示。