由于没有全局安装 webpack和webpack-cli，所以导致执行命令行
webpack时会报错
image.png
1、运行“npm install webpack webpack-cli -D”安装webpack和webpack-cli包到项目。版本如下：
image.png
- 在
webpack.config.js中配置
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
path: __dirname + "/dist",
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.css$/,
use: "css-loader"
}
]
}
};
在index.html 中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webpack</title>
</head>
<body></body>
<script src="./bundle.js"></script>
</html>
在index.js中
import "./index.css";
console.log("Success");
- 然后在控制台执行命令行报错，
无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称
image.png
解决方法
在package.json中配置 "scripts"
{
"scripts": {
"dev": "webpack"
},
"dependencies": {
"css-loader": "^3.4.2",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11"
}
}
image.png
然后在控制台输入 yarn dev 或 npm run dev，即可编译成功
image.png
另外解决方式可全局安装 webpack
npm install -g webpack
个人不太喜欢这种方式。
