- 1、 安装webpack：推荐本地安装，不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。
-
-
- 本地安装：（推荐）
-
npm install --save--dev webpack // 安装最新稳定版版本webpack
npm install --save--dev webpack@3.4.1 // 安装3.4.1版本webpack
或者 npm i -D webpack@3.4.1 // npm i -D 是npm install --save-dev的缩写
-
-
- 全局安装：
-
npm install --global webpack
-
-
- 安装最版本：
-
npm install webpack@beta
-
1.1、安装太高版本的webpack（当时安装的@5.45.1），打包的时候会报错：We will use "npm" to install the CLI via "npm install -D webpack-cli"。4.0以后的版本已经分离了webpack-cli，所以个人用的还是之前比较稳定的3.0版本，以后可以用其他高版本慢慢学习。
高版本报错时，先卸载高版本，再安装低版本。/ 或者，安装高版本需要的对应内容也可。
1.1 npm uninstall webpack@5.45.1 // 卸载高版本的webpack。
1.2 npm i -D webpack@3.4.1 // 安装低版本的webpack@3.4.1，问题就解决了。
-
1.2查看webpack的各个版本
npm view webpack versions // 查看webpack各个版本
-
2、使用loader
-
安装css-loader、style-loader，会在package.json里面显示。
npm install --save-dev css-loader style-loader
// 不带版本号，会安装最新的稳定版loader，可能会和低版本webpack冲突。
- 2.1、如果有解决冲突问题：先卸载对应高版本loader，再安装对应低版本loader。
2.1.1 npm uninstall css-loader@6.7.1 // 卸载css-loader的对应6.7.1版本
2.1.2 npm uninstall style-loader@3.3.1 // 卸载style-loader的对应3.3.1版本
-
2.2 查找webpack适配的css-loader版本、style-loader版本：去github官网，查看对应版本的package.json即可。（这里以css-loader为例）
-
-
2.2.1 打开github官网：
-
-
-
2.2.2 搜索css-loader，找到第一个，点击进去。
-
-
- 2.2.3 选中Tags，查看css-loader不同的版本号。
- 2.2.3 选中Tags，查看css-loader不同的版本号。
-
-
2.2.4 css-loader、style-loader不同版本和webpack适配情况：
css-loader webpack style-loader ^0.x.x ^3.x.x ^0.x.x ^1.x.x 、
^2.x.x、
^3.x.x^4.x.x ^1.x.x、
^2.x.x^5.x.x、
^6.x.x(对css-loader4.27.0也可)
^5.x.x^3.x.x
-
-
在 webpack.config.js文件夹里，配置
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
}]
}
webpack与webpack-dev-server版本适配对照标表： 在使用webpack时
webpack 3.x 要使用 webpack-dev-server 2.x
webpack 4.x 要使用 webpack-dev-server 3.x
