先来一些我的碎碎念吧！毕业到现在也一年了，写了很多项目，vue的，react的都有，但都是速成框架，站在前辈大佬的肩膀上，吭呲吭呲的写业务。写业务写到后期很迷茫，每天都是这些业务变来变去。关于webpack这一块的问题除了稍稍优化下，也没有碰到过，直到看了呆呆大佬的面试文章，我感觉要自闭了，10个问题9个说不明白。于是痛下决心要开始学习，先从webpack开始，一步一个脚印搞懂来。文章不会写的很难，毕竟我的肚子里也没几点墨水，就记录我学习webpack过程中出现的bug。期间如果会出现小白问题，若有大佬路过，请指出！！！！！
webpack到底是如何对我们的项目打包？
这个问题网上找一大堆解答的，我就直接网上找了张图，看图就能很清楚的明白。webpack在处理的时候，他首先是根据我们的配置文件来找到入口的。从入口开始，生成一个依赖图，这个依赖图包括应用程序中所需的所有模块，然后在遍历图结构，打包一个个模块，不同的文件就使用不同的loader来解析
首先第一步就是把我们项目初始化！
mkdir webpack-test
cd webpack-test
npm init -y
然后在安装webpack webpack-cli 可能很多人会问（其实我自己刚开始也不知道，哈哈哈哈）webpack webpack-cli有啥区别，webpack-cli是webpack脚手架，这样我们就可以直接在终端用webpack命令啦
npm install webpack webpack-cli
在package.json里添加一条命令
"build": "webpack --config webpack.config.js",
第一趴webpack基础构建主要是三个部分
1. 加载css
主要是说明我们在项目中的css在webpack中是如何进行转换？
style-loader和css-loader是如何工作的？
为什么css的转换必须要两个loader？
为什么style-loader必须在css-loader前面？
css在不同网站是有兼容性问题的，怎样才可以避免我每次写css都要写很多拓展兼容各个浏览器的css样式，postcss-loader该怎么用？
我项目中用了scss，less，我该怎么配置？
2. 加载图片
项目中的图片在webpack中要如何配置才能加载？
如何把项目中所有的图片在打包之后在dist文件夹中都配置到同一个文件下？
3. 配置插件
每次打包都需要手动添加index.html,怎么样才可以在打包之后不用在dist包中手动添加html？
如果我有自定义的index.html模版，我要如何配置？
我不想每次打包之前都手动删除之前遗留的dist包？我想要配置多个输入输出我该怎么做？
所有的答案我都在代码里写了注释，跟着代码一步一步的敲就可以啦！
webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
/**
* 多个输出/输入
*/
// entry: './src/index.js',
// output: {
// filename: 'vender.js',
// path: path.resolve(__dirname, 'dist')
// },
entry: {
app: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].vender.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
/**
* 注：加载css
* style-laoder是要放到css-loader前面，不然打包会出现错误
* 这是因为loader执行顺序是从右往左，从下往上，webpack肯定是先将所有的css模块依赖解析完得倒计算结果在创建style标签，因此应该把style-loader放在css-loader的前面
*
* style-loader 他可以创建一个style标签，并且把引入进来的css样式都塞到这个标签里
* css-loader 他用特定的语法规则对引入进来的css模块进行内容转换，转换出来的css模块其实会拆分成数组，如果单独引入css-loader，是无效的，页面对他转换出来的数组无法识别，
* 所以需要style-loader把css-loader转换出来的css模块包裹在一个style标签里，引入index.html里的head，这样就可以展示css样式啦！
*/
use: ['style-loader', 'css-loader', "postcss-loader"]
},
{
test: /\.less$/,
use: [
'style-loader', 'css-loader', "postcss-loader", 'less-loader'
]
},
{
/**
* 加载图片
*/
test: /\.(png|svg|jpg|gif|jpeg)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/'
}
}
}
]
},
plugins: [
/**
* 在dish文件夹中自动生成index.html，也可以指定我们自己的模版来生成index.html,这样每次打包就不需要我们再去手动添加index.html
*/
new HtmlWebpackPlugin({
title: 'Webpack Output Management',
filename: 'index.html',
template: 'public/index.html'
}),
/**
* 每次打包都会自动删除之前存在的dist文件夹
*/
new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ['dist']
})
]
}
postcss.config.js
module.export = {
plugins: [
'postcss-preset-env',
]
}
注：解答问题
- css模块 PostCSS其实一个对css进行转化的工具，它可以把scss，less转成css，它有非常多的插件，巨好用。比如autoprefixer/postcss-preset-env就可以帮我们自动加上浏览器前缀，比如-webkit-啥啥啥的，再比如postcss-pxtorem就是针对浏览器适配的，可以把px转成rem，还有很多很多，我就不一一列举了，
npm i postcss-loader autoprefixer postcss-pxtorem postcss-preset-env -D
autoprefixer和postcss-preset-env区别
这两个插件都是针对css兼容性，postcss-preset-env她可以根据目标浏览器或者运行时环境添加所需的polyfill，也会自动帮助我们添加postcss-preset-env。它两最大的区别在于postcss-preset-env，如果我们使用十六进制的颜色时只设置了8位，有些浏览器是不认识这种愈发的，我们最好可以转成RGBA的形式。但是autoprefixer不会帮助我们转换，而postcss-preset-env是可以完成这种功能的
项目结构+预览
bug集锦
2021-08-05
Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
今天的我估计是个傻叉，无奈。第一步就报错，看了报错信息说我写的配置项与webpack初始化的配置对象不匹配，一看才发现，单词写错，真的是猪脑袋🐷
