webpack代理配置打包后接口404_JavaScript之webpack打包

webpack是一个静态模块打包工具，使用webpack处理项目时，它会递地构建一个依赖关系图（dependency graph），其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个bundle

打包原理：

• 识别入口文件
• 逐层识别模块依赖（Commonjs、AMD或者ES6的import，webpack都会对其分析，从而获取代码的依赖）
• webpack分析代码-->转换代码-->编译代码-->输出代码
• 输出打包后的代码

几个重要的概念：

• entry webpack打包的入口，配置入口文件
• output webpack打包的出口，配置打包后的文件，可指定输出文件的路径
• module 模块，webpack中一切皆模块，一个模块对应着一个文件，webpack会从entry配置的入口文件开始，递归地找出所有依赖的模块
• chunk 代码块，一个chunk有多个模块组合而成，用于代码的合并与分割
• loader 项目中存在很多非js文件（webpack只能理解js），我们可以用loader将这些文件转换为webpack可以处理的模块，完成打包压缩
• plugins 插件，插件接口功能极其强大，可用来处理各种各样的任务：打包优化、压缩、重新定义环境中的变量等
• optimization 优化，可根据mode的不同执行不同的优化
• devServer 配置本地服务器

本文基于webpack 4+ 完成打包

一、项目初始化

1、安装node.js

npm -v
node -v

2、全局安装webpack、webpack-cli

npm install webpack webpack-cli --global

3、项目安装webpack(webpack4.x将一些模块的功能提取出来，放在了webpack-cli模块中，因此还需要安装webpack-cli模块)

新建一个项目文件夹webpack-demo，在项目文件夹下初始化项目，生成package.json文件

//执行该命令，然后不断回车，最后输入yes，则初始化完成,生成package.json 
npm init
//全部使用默认配置，快速生成package.json
npm init -y

4、项目安装webpack(webpack4.x将一些模块的功能提取出来，放在了webpack-cli模块中，因此还需要安装webpack-cli模块)

npm install --save-dev webpack
npm install --save-dev webpack-cli

5、安装react、react-dom，并构建文件目录

npm install --save-dev react   
npm install --save-dev react-dom

6、配置webpack.config.js

//path处理绝对路径
npm install --save-dev path