一、项目介绍
项目目录
builds // 打包文件存放文件夹
src // 项目组件文件夹
component
app.js
main.js
index.html
package.json // 配置文件
webpack.config.js // 配置文件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="../builds/index.js"></script>
</body>
</html>
app.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "welcome to use webpack!";
return greet;
}
main.js
const greeter = require('./app.js');
document.querySelector("#root").appendChild(greeter());
package.json
{
"name": "cbc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.39.3",
"webpack-cli": "^3.3.8"
}
}
webpack.config.js
module.exports = {
mode: "development",
entry: __dirname + "/src/component/main.js",
output: {
filename: "index.js",
path: __dirname + "/builds"
}
}
运行命令npm start是可以打包的，并且打包如下：
image.png
二、有配置文件webpack.config.js，遇到的问题
在开发过程中往往都需要修改配置文件，在修改webpack.config.js的入口(entry)和出口(output)时有时候会将路径填写错误，导致打包出现错误。
下面就举一个例子：
我将上面项目的webpack.config.js文件中的入口(entry)和出口(output)路径修改如下：
module.exports = {
mode: "development",
entry: __dirname + "./src/component/main.js",
output: {
filename: "index.js",
path: __dirname + "./builds"
}
}
然后运行npm start进行打包，就出现了以下报错：
image.png
1、第一条的红色字体是cli报的错，意思是参数数量不足或没有找到入口(entry)。
Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.
参数数量不足或没有找到入口。
或者，运行“webpack(-cli)——help”获取使用信息。
2、第二条的红色字体是入口(
Entry)路径没有找到。
ERROR in Entry module not found: Error: Can't resolve '/Users/wb-cbc503422/Desktop/cbc./src/component/main.js' in '/Users/wb-cbc503422/Desktop/cbc'
进入模块错误未找到:错误:无法解决'/Users/wb-cbc503422/Desktop/cbc./src/component/main。js '在' /用户/ wb-cbc503422 /桌面/ cbc '
解决问题
其实这两个错误信息表示的是一个意思，那就是入口路径没有找到。因为我修改了入口(entry)和出口(output)的路径。
这里有一个__dirname，这是什么意思呢？，我想大家都知道，如果不知道可以去百度一下。我这里只是简单的说一下，这个总是指向被执行 js 文件的绝对路径。
要想知道正确的路径，首先得知道我修改的路径错在了哪里，然后才能根据项目目录找到正确的路径。那怎样才能知道我修改的路径错在了哪里。非常简单，打印一下不是就是知道了。但是这个是配置文件，不能按照普通js文件一样打印，需要用node打印。
修改webpack.config.js配置文件如下：
console.log('打印1:', __dirname);
console.log('打印2:', __dirname + "./src/component/main.js");
module.exports = {
mode: "development",
entry: __dirname + "./src/component/main.js",
output: {
filename: "index.js",
path: __dirname + "./builds"
}
}
然后在终端运行node命令node webpack.config.js，得出的结果如下：
打印1: /Users/wb-cbc503422/Desktop/cbc
打印2: /Users/wb-cbc503422/Desktop/cbc./src/component/main.js
通过打印结果发现：“入口路径就是一个错误路径”，同样的方式打印对比出口文件也是不对的。
重新修改配置文件如下：
module.exports = {
mode: "development",
entry: __dirname + "/src/component/main.js",
output: {
filename: "index.js",
path: __dirname + "/builds"
}
}
但是我在学习webpack的时候有看到如下两行代码：
const path = require('path');
path: path.resolve(__dirname, "dist"), // string
path在Node中文网找到了解释，以及它的方法path.resolve()。
为了不让我代码看起来太low，所以我决定将path运用到配置文件中。
再次修改配置文件如下：
const path = require('path');
module.exports = {
mode: "development",
entry: path.resolve(__dirname, "src/component/main.js"),
output: {
filename: "index.js",
path: path.resolve(__dirname, "builds")
}
}
然后运行npm start打包成功了。
image.png
三、没有配置文件webpack.config.js，遇到的问题
接着上面的项目，将配置文件webpack.config.js删除。
builds // 打包文件存放文件夹
src // 项目组件文件夹
component
app.js
main.js
index.html
package.json // 配置文件
运行npm start就出现了如下问题：
image.png
1、第一条的红色字体是cli报的错，意思是参数数量不足或没有找到入口(entry)。
Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.
参数数量不足或没有找到入口。或者，运行“webpack(-cli)——help”获取使用信息。
2、第二条的黄色字体意思是在webpack配置中mode模式没有指定是
development还是production。
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
警告在配置
“模式”选项尚未设置，webpack将返回到“生产”值。将“mode”选项设置为“development”或“production”，以便为每个环境启用默认值。
您还可以将它设置为“none”来禁用任何默认行为。了解更多信息:https://webpack.js.org/configuration/mode/
3、第三条的红色字体是
Entry路径没有找到。
ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/wb-cbc503422/Desktop/cbc'
进入模块错误未找到:错误:无法解决'。/ src”在“/用户/ wb-cbc503422 /桌面/ cbc的
解决问题
其实第一条错误信息、第三条错误信息和上文讲的是一样的，都是没有找到入口(entry)。这样我们可以将此次报错总结为两点，第一点是入口路径没找到，第二点是一个警告，没有指定mode。
1、第一个问题(没有找到entry)
通过在webpack官网查找，在webpack官网的API=>命令行界面和配置=>组态中找到了解决办法。
修改package.json配置文件，修改文件如下：
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack src/component/main.js -o builds/index.js"
},
...
}
src/component/main.js： 指定入口文件路径
builds/index.js： 指定出口文件路径
修改好之后呢运行npm start得到结果如下：
image.png
现在打包成功了，但是mode还是没有指定，所以还会有警告。
2、第二个问题
其实在cli配置中就有提到了这个配置项，只需要将package.json配置文件，修改如下：
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --mode development src/component/main.js -o builds/index.js"
},
...
}
--mode development：指定是生产模式还是开发模式
然后我继续运行npm start的打包结果：
image.png
本章就总结到这了。
网友评论