webpack5笔记

提示：webpack不建议全局安装脚手架，可能会造成项目版本和本地版本冲突。

安装步骤

命令：npm i webpack webpack-cli --save-dev
作用：在项目文件中安装webpack脚手架

---

命令：npx webpack
作用：如果没有全局下载webpack,在控制台中直接使用webpack会报错未下载。使用npx webpack可以在文件中进行压缩构建

---

命令：npx webapck --entry ./src/index.js --mode production(生产环境)
作用：直接设置入口文件 了解即可

---

插件

命令：cnpm i html-webpack-plugin -D
作用：在dist文件夹中生成一个index.html,可以自动引入打包js文件。
不然构建只有一个main.js文件，这个插件可以将一些构建打包后文件，进行自动引入。

命令：cnpm i webpack-dev-server -D
作用：在开发环境安装，更改后会自动刷新

命令：cnpm i style-loader -D cnpm i css-loader -D cnpm i less-loader less -D
作用： less会先进行css解析，之后样式解析，不过这样的话 合并后的css都到了head标签的style中
{

    test: /\.(css|less)$/,
    use: ['style-loader', 'css-loader', 'less-loader']
  },

命令：cnpm i mini-css-extract-plugin -D (基于webpack5构建的)
作用：可以把原来style-loader合并在head标签中style ，合并为一个文件，通过文件引入cssy样式

命令：cnpm i css-minimizer-webpack-plugin -D
作用：用于压缩Css文件

---

解决方案：

提示：未完待续…