webpack

1、webpack配置文件：webpack.config.js

template：模板文件
filename：输出文件

自动生成的html文件有引入js：
htmlwebpackplugin对象：从html文件出发得dist相对html文件的路径，再拼接js相对dist的路径，最终得js相对html的路径

而原始html文件中我是没有引入js的

5、css-loader：

和入口文件产生关联，引入到入口文件（注意bootstrap如何引入，先用npm i 下载软件包代码（bootstrap代码））


bootstrap代码下载到项目中了

6、提取css代码（单独打包为一个css文件）

不能和style-loder一起使用

commonjs：内置模块，require中直接写名字，自定义模块写文件路径。
es：模块导出：import obj from ’模块名或路径‘（若后面用不到obj，可写为import ’模块名或路径‘）

提取成功：

7、打包时压缩css代码



主要是optimization，其他和前面配置相同
它会同时使原本压缩的js代码不压缩，故加上...恢复js代码压缩处理

如果没有取消下一行注释：css被压缩，js没有被压缩

8、less-loader：

7、
资源模块类型：

文件大于8kb，asset采用第一种，小于则用第二种。



[hash][ext][query]是占位符

8、用户登入案例

此处添加了请求拦截器等的axios函数还想让外部使用，导出函数

9、搭建开发环境
生产模式：npm run build ，改动代码，要重新打包才能运行查看网页，开发环境：启动web服务，自动检测代码变化，热更新到网页，npm run dev






优化：
10、打包模式：
开发模式：调错，实时加载，模块热更新
生产模式：极致压缩代码，打包上线

11、注入环境变量


不能直接把process.env.node_env放在那，虽然他是一个字符串，插件内部源码如果发现value位置是一个字符串，会把字符串中的英文当作变量替换到源代码位置，但我们想要的是一个字符串去替代前面的键名匹配的变量。

设置完后，可在js中书写环境变量，和key名相同的变量将被替换为右边的字符串

12、解析别名：把之前import引入路径使用的相对路径改为绝对路径

此处_dirname：为当前文件（webpack配置文件）所在文件夹（项目文件夹）

13、webpack优化：使用cdn技术
cdn：内容分发网络，一组分布在各个地区的服务器。
生产模式下，页面运行在浏览器上，第三方库用cdn地址进行请求，就近返回第三方库源码（打包时禁止打包第三方库，用cdn地址取代）
14、多页面打包

public中的index.html是web服务程序默认作为首页使用的，不用打包，启动开发服务器，就会打开此页面

15、提取公共代码