修改打包入口与出口#

默认打包入口是src文件夹下的index.js

默认打包出口是dist文件夹下的main.js

如果打包成config对象，一定要赋值给module.export

打包html：使用插件（给webpack提供功能）#

注意要在webpack的配置文件中用require引入html配置包

打包css：使用加载器（让webpack识别更多文件）#

为了让css能够被一起打包，需要在index.js内引入css文件

css跟js打包在一起放在js文件内

优化打包过程：将打包后的css从js提取#

注意：webpack的配置文件内加载插件一定要先require引入，再new一个新的

设置出口与html/js同级还需要添加相对路径参数

优化打包-对css进行压缩#

添加‘…’使js的压缩不受影响

打包less为css#

打包图片等：webpack5自带资源模块#

如果要把图片导入js或是通过js在html创建图片，需要通过对象的方式引入图片

搭建开发环境（自动打包+live server）#

配置模式的命令在webpack.config.js里

配置自定义命令的位置在所用包目录下的package.json里

服务器默认以public文件夹作为提供给浏览器的静态资源根目录

创建的默认端口为8080，即localhost:8080，会自动访问html

要访问页面内容可以加上目录，即localhost:8080/index.html

除此之外，dist目录(出口)也作为另一个根目录，可以加载其他资源

如localhost:8080/html/index.html

也可以在public下新增一个html，使用location.href强制跳转访问

打包模式#

webpack内：

package内：

打包模式应用#

注入环境变量#

在webpack.config.js内配置上述代码

在实际代码内使用自己加的变量

开发环境调错（source map）#

解析别名alias#

在webpack內配置

webpack优化：CDN使用#

多页面打包#

如图，把entry和out设置为对象

在entry中设置为属性名的模块名，webpack会在输出时用来替换output中的[name]

plugins中每个html模块都要有对应的html插件对象，同时还要新增chunks属性，其值为entry中的属性（模块名）

其他模块（如css）同理

注指向html，而entry指向js

优化多页面打包：提取公共代码#