一、項(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，這是什么意思呢舷夺？苦酱，我想大家都知道，如果不知道可以去百度一下给猾。我這里只是簡(jiǎn)單的說一下疫萤，這個(gè)總是指向被執(zhí)行 js 文件的絕對(duì)路徑。
要想知道正確的路徑敢伸，首先得知道我修改的路徑錯(cuò)在了哪里扯饶，然后才能根據(jù)項(xiàng)目目錄找到正確的路徑。那怎樣才能知道我修改的路徑錯(cuò)在了哪里池颈。非常簡(jiǎn)單尾序，打印一下不是就是知道了。但是這個(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ò)誤路徑”兰怠，同樣的方式打印對(duì)比出口文件也是不對(duì)的梦鉴。
重新修改配置文件如下：
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é)到這了。
