webpack基本操作

Webpack的学习：

初始化

npm init -y  初始化一个nojs 项目 它会自动生成一个page.json

npm i webpack@5.5.1 webpack-cli@4.2.0 -D  下载webpack  -D代表开发

 nmp i jquery -S
下载jqeury到项目

指定打包路径

![在这里插入图片描述](https://img-blog.csdnimg.cn/de512d8504be4407b9f309f0164e71e4.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5aSn55m95YWURXhjZXB0aW9u,size_10,color_FFFFFF,t_70,g_se,x_16)

webpack自动打包：

安装插件：

npm i webpack-dev-server@3.11.0 -D

配置文件：

打包

出现没反应的效果

webpack-dev-server通过publicPath配置项提供的地址来寻找所服务的文件。所以：

webpack.config.js中加上这个

webpack自定义首页

html-webpack-plugin在替换首页的同时也会把js脚本自动注入到首页中去：

此后无需注意页面中js的引入

注意点：如果开启了实时打包的功能，那么文件中的dist就可以删掉，不会影响

自定义端口号

webpack中的loader

在这里插入图片描述

在进行css导入操作：

 npm i babel-loader@8.2.1 @babel/core@7.12.3 @babel/plugin-proposal-class-properties@7.12.1 -D

打包发布：

SourceMap