一、項(xiàng)目介紹
項(xiàng)目目錄
builds // 打包文件存放文件夾
src // 項(xiàng)目組件文件夾
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"
}
}
運(yùn)行命令npm start是可以打包的，并且打包如下：
二、有配置文件webpack.config.js，遇到的問題
在開發(fā)過程中往往都需要修改配置文件，在修改webpack.config.js的入口(entry)和出口(output)時(shí)有時(shí)候會(huì)將路徑填寫錯(cuò)誤，導(dǎo)致打包出現(xiàn)錯(cuò)誤。
下面就舉一個(gè)例子：
我將上面項(xiàng)目的webpack.config.js文件中的入口(entry)和出口(output)路徑修改如下：
module.exports = {
mode: "development",
entry: __dirname + "./src/component/main.js",
output: {
filename: "index.js",
path: __dirname + "./builds"
}
}
然后運(yùn)行npm start進(jìn)行打包，就出現(xiàn)了以下報(bào)錯(cuò)：
1、第一條的紅色字體是cli報(bào)的錯(cuò)，意思是參數(shù)數(shù)量不足或沒有找到入口(entry)。
Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.
參數(shù)數(shù)量不足或沒有找到入口。
或者，運(yùn)行“webpack(-cli)——help”獲取使用信息。
2、第二條的紅色字體是入口(
Entry)路徑?jīng)]有找到。
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'
進(jìn)入模塊錯(cuò)誤未找到:錯(cuò)誤:無法解決'/Users/wb-cbc503422/Desktop/cbc./src/component/main。js '在' /用戶/ wb-cbc503422 /桌面/ cbc '
解決問題
其實(shí)這兩個(gè)錯(cuò)誤信息表示的是一個(gè)意思，那就是入口路徑?jīng)]有找到。因?yàn)槲倚薷牧巳肟?entry)和出口(output)的路徑。
這里有一個(gè)__dirname，這是什么意思呢？，我想大家都知道，如果不知道可以去百度一下。我這里只是簡單的說一下，這個(gè)總是指向被執(zhí)行 js 文件的絕對路徑。
要想知道正確的路徑，首先得知道我修改的路徑錯(cuò)在了哪里，然后才能根據(jù)項(xiàng)目目錄找到正確的路徑。那怎樣才能知道我修改的路徑錯(cuò)在了哪里。非常簡單，打印一下不是就是知道了。但是這個(gè)是配置文件，不能按照普通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"
}
}
然后在終端運(yùn)行node命令node webpack.config.js，得出的結(jié)果如下：
打印1: /Users/wb-cbc503422/Desktop/cbc
打印2: /Users/wb-cbc503422/Desktop/cbc./src/component/main.js
通過打印結(jié)果發(fā)現(xiàn)：“入口路徑就是一個(gè)錯(cuò)誤路徑”，同樣的方式打印對比出口文件也是不對的。
重新修改配置文件如下：
module.exports = {
mode: "development",
entry: __dirname + "/src/component/main.js",
output: {
filename: "index.js",
path: __dirname + "/builds"
}
}
但是我在學(xué)習(xí)webpack的時(shí)候有看到如下兩行代碼：
const path = require('path');
path: path.resolve(__dirname, "dist"), // string
path在Node中文網(wǎng)找到了解釋，以及它的方法path.resolve()。
為了不讓我代碼看起來太low，所以我決定將path運(yùn)用到配置文件中。
再次修改配置文件如下：
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")
}
}
然后運(yùn)行npm start打包成功了。
三、沒有配置文件webpack.config.js，遇到的問題
接著上面的項(xiàng)目，將配置文件webpack.config.js刪除。
builds // 打包文件存放文件夾
src // 項(xiàng)目組件文件夾
component
app.js
main.js
index.html
package.json // 配置文件
運(yùn)行npm start就出現(xiàn)了如下問題：
1、第一條的紅色字體是cli報(bào)的錯(cuò)，意思是參數(shù)數(shù)量不足或沒有找到入口(entry)。
Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.
參數(shù)數(shù)量不足或沒有找到入口?；蛘撸\(yùn)行“webpack(-cli)——help”獲取使用信息。
2、第二條的黃色字體意思是在webpack配置中mode模式?jīng)]有指定是
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/
警告在配置
“模式”選項(xiàng)尚未設(shè)置，webpack將返回到“生產(chǎn)”值。將“mode”選項(xiàng)設(shè)置為“development”或“production”，以便為每個(gè)環(huán)境啟用默認(rèn)值。
您還可以將它設(shè)置為“none”來禁用任何默認(rèn)行為。了解更多信息:https://webpack.js.org/configuration/mode/
3、第三條的紅色字體是
Entry路徑?jīng)]有找到。
ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/wb-cbc503422/Desktop/cbc'
進(jìn)入模塊錯(cuò)誤未找到:錯(cuò)誤:無法解決'。/ src”在“/用戶/ wb-cbc503422 /桌面/ cbc的
解決問題
其實(shí)第一條錯(cuò)誤信息、第三條錯(cuò)誤信息和上文講的是一樣的，都是沒有找到入口(entry)。這樣我們可以將此次報(bào)錯(cuò)總結(jié)為兩點(diǎn)，第一點(diǎn)是入口路徑?jīng)]找到，第二點(diǎn)是一個(gè)警告，沒有指定mode。
1、第一個(gè)問題(沒有找到entry)
通過在webpack官網(wǎng)查找，在webpack官網(wǎng)的API=>命令行界面和配置=>組態(tài)中找到了解決辦法。
修改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： 指定出口文件路徑
修改好之后呢運(yùn)行npm start得到結(jié)果如下：
現(xiàn)在打包成功了，但是mode還是沒有指定，所以還會(huì)有警告。
2、第二個(gè)問題
其實(shí)在cli配置中就有提到了這個(gè)配置項(xiàng)，只需要將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：指定是生產(chǎn)模式還是開發(fā)模式
然后我繼續(xù)運(yùn)行npm start的打包結(jié)果：
本章就總結(jié)到這了。
