webcpack.config.js文件中的相关代码注释
/*
webpack.config.js webpack的配置文件
作用：指示webpack干哪些活儿(当你运行webpack时，会加载里面的配置)
*重点：所有的构建工具都是基于nodejs平台运行的~模块化默认采用commonjs
*/
//resolve：用来拼接绝对路径的方法
const {
resolve} = require('path');
module.exports={
//webpack配置
//入口起点
entry:'./src/index.js',
//输出
output:{
//输出文件名
filename:'built.js',
//输出路径
//__dirname nodejs的变量，代表当前文件的目录绝对路径
path:resolve(__dirname,'build')
},
//loader的配置
module:{
rules:[
//详细loader配置
//不同文件必须配置不同的loader,
//loader文件均需通过npm i xxx -D 指令下载
{
//匹配哪些文件
test:/\.css$/,
//使用哪些loader进行处理
use:[
//use数组中loader执行顺序：从右到左，从下到上 依次执行
//创建style标签，将js中的样式资源插入进行，添加到head中生效
'style-loader',
//将css文件变成commmonjs模块加载到js中，里面的内容是样式字符串
'css-loader'
]
},
{
test:/\.less$/,
use:[
//创建style标签，将js中的样式资源插入进行，添加到head中生效
'style-loader',
//将css文件变成commonjs加载到js中，里面内容是样式字符串
'css-loader',
//将less文件编译成css文件
//需要下载less-loader和less
'less-loader'
]
}
]
},
//plugins的配置
plugins:[
//详细plugins的配置
],
//模式
mode:'development' //开发模式
//mode:'production' 生产模式
}
这几天遇到的一些报错：
1.在终端运行时，一定要找到对的路径，并且使用npm init加载项目，初始化运行环境，找对路径之后，只有这两步需要手动输入，其他的按enter键下一步。在初始化过程中，遇到过can’t gerResolve报错,找了半天没找到原因，然后就回头看了之前的教程，又重新走了一遍流程，发现少了这一步
2.加载环境之后，终端下载需要的包,这些包在package.json文件中都可以检查是否漏装
3.Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
解决方案：在电脑终端重新使用npm install webpack -g重新下载webpack，我因为上一个报错，搜索了一篇帖子，在终端卸载了webpack,所以就出现了这个报错，于是卸载webpack,但是并没有解决问题
4.DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
解决方案如下
卸载原来的html-webpack-plugin
终端命令：npm uninstall html-webpack-plugin
安装最新的html-webpack-plugin
安装最新的
终端命令：npm i --save-dev html-webpack-plugin
5.TypeError: Cannot read property 'tap' of undefined
使用webpack打包时出现TypeError: Cannot read property ‘tap’ of undefined问题
查看package.json包，发现少了html-webpack-plugin环境
终端输入指令下载：
npm i html-webpack-plugin -D
看过几篇其他博文，讲的原因是wenpack版本不一致，初学建议配置局部变量，全局等熟悉了再上手配置，及时检查package.json中的包是否下载齐全，每一个文件打包需要的包配置都不同，具体问题具体场景分析
6.ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
这是由于postcss-loader版本不兼容导致
解决方案：下载较低版本的postcaa-loader
npm i [email protected] -D
7.ERROR in Error: Child compilation failed:
Module not found: Error: Can’t resolve ‘C:\Users\sun\Desktop\webpack学习\12.js语法检查\src\index.html’ in ‘C:\Users\sun\Desktop\webpack学习\12.js语法检查’:
这是由于路径书写有误导致的问题，仔细检查文件下的路径是否与webpack.config.js中的路径一致
8.使用npx webpack-dev-server指令出现Cannot find module 'webpack-cli/bin/config-yargs’报错
这是由于webpack-dev-server与weback-cli版本不兼容导致;
解决方案：降低webpack-cli版本，调试之后可以正常运行的一组版本
9.WARNING in ./src/js/index.js
Failed to load config "airbnb-base" to extend from.
Referenced from: C:\Users\sun\Desktop\webpack学习\21.缓存\package.json
这是由于插件下载缺少导致：
下载如下插件：
npm i eslint-config-airbnb eslint-plugin-import -D`
10.Module not found: Error: Can’t resolve ‘core-js/modules/es.array.reduce.js’ in ‘C:\Users\sun\Desktop\webpack学习\21.缓存\src\js’
遇到的最最最没有头绪的一个bug
解决方案：用yarn指令下载core-js:
yarn add core-js
安装完成后，运行成功
Yarn 的优点
快速：Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。
可靠：使用详细、简洁的锁文件格式和明确的安装算法，Yarn 能够保证在不同系统上无差异的工作。
安全：在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。
这个指令太好用了，今天第一次使用，解决了我的世纪大难题，以后多练习使用这个指令
报错原因整体总结：
1.书写有误
2.src,build，webpack.config.js等文件路径存放不当
3.少数的版本兼容性问题
4.所需要的的包没有下载齐全
webpack初阶学习结束，后期继续练习