webpack5 基础配置 loader的认识 css-loader

webpack5

之前也是一直对webpack有大概的了解，没有一个全面的学习，现在忙完答辩了，好好从头到尾学习一下。

webpack是一个静态的模块打包工具，顾名思义就是支持模块化，将我们的文件打包成静态资源如js css png等资源让我们放到静态资源服务器上。

webpack的打包机制：

webpack会找到我们的入口文件，从入口文件开始，一步一步找到应用程序所需要的所有模块，生成一张依赖关系图，然后根据依赖关系图打包所有的模块。（不同的文件对应不用的loader打包），如果不在依赖关系图中的模块，是不会被打包的。
还有一个性能优化的点，tree shaking,这块的意思就是当你引入一个js文件，里面声明了一个函数，但是至始至终都没有用到，那么处于性能优化考虑，这个函数也是不能被打包的，就可以利用tree shaking。后续再提,先学基础。

正常我们只要生成一个src下面带上一个index.js文件，就可以在命令行执行webpack来打包。

但如果我们想更改路劲文件名的话，可以通过
npx webpack --entry ./src/我自定义的.js
npx webpack --output ./build/自定义.js。

官网的位置如图，可以查阅到很多命令行。
但我们开发一般通过webpack.config.js文件去配置。

这是最基础的一个配置文件。

每次我们执行npm run build /yarn build时，就会执行webpack，他就会去根目录查找webpack.config.js文件看看有没有这个文件，有的话使用里面的配置，没有的话使用默认的配置。
引用webpack.config.js文件是使用COMMONJS的，所以我以用module.exports导出。

entry是配置入口文件，如要打包谁。可以使用相对路径

output一般是个对象，配置出口文件，比如打包成谁。里面的filename是指打包出来的文件名，path是打包文件放的路径，注意这个不可以是相对路径，只能是绝对路径，我们借助path模块，path.resolve(a,b)是拼接a跟b，__dirname是获取当前文件夹的目录，即到这个02_webpack配置。后面的./build是配置上去。

执行npm run build后出现

但如果我们想改变webpack.config.js文件这个文件名呢，
通过 --config xxx来改变
也可以打包成功。

loader学习

css loader

先来看一个案例，