使用npm安裝webpack報(bào)錯(cuò)：
Refusing to install package with name "webpack" under a package
報(bào)錯(cuò)原因：package.json文件的name包含名稱webpack武学。
webpack4.x打包總結(jié)：
1 使用語句：npm install webpack webpack-cli -D 安裝webpack和webpack-cli。
2 使用語句：npm init -y 進(jìn)行初始化蝗茁。
3 安裝完畢并初始化之后，我們多了一個(gè)package.json文件(內(nèi)容如下)：
{
"name": "npm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2"
}
}
4 package.json 文件下script里面添加pack語句："pack":"node_modules/.bin/webpack"
需要注意兩個(gè)問題：(1) 需要進(jìn)入node_modules/.bin/webpack析桥，不能直接使用webpack來打包（會(huì)重復(fù)提示安裝webpack-cli）因此皮迟，我們的pack 需要加上node_modules/.bin/webpack (2)新版本打包中間需要加-o 哥倔。
{
"name": "npm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"pack":"node_modules/.bin/webpack index.js -o index.bundle.js",
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2"
}
}
5 使用npm run pack將home.js（可自行創(chuàng)建）打包，輸出home.bundle.js文件：
!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}}...
6 打包之后提示黃色警告 ： The 'mode' option has not been set......
執(zhí)行pack打包的時(shí)候提示黃色警告小腊，而且觀察上述home.bundle.js文件救鲤，發(fā)現(xiàn)并不是我們想要的文件，這是因?yàn)閣ebpack4.x之后引入了mode（模式）：一個(gè)是開發(fā)環(huán)境：development 秩冈，另外一個(gè)是生產(chǎn)環(huán)境：production本缠。我們需要更改上述pack打包語句：
{
"name": "npm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
//將pack刪除，添加dev和build
"dev": "node_modules/.bin/webpack index.js -o index.bundle.js --mode development",
"build": "node_modules/.bin/webpack index.js -o index.bundle.js --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2"
}
}
7 然后在使用npm run dev 或者npm run build語句入问。打包之后不在有黃色的警告了丹锹，說明打包成功了。最后我們?cè)趆ome.bundle.js文件里面寫的內(nèi)容被打包成了這樣:
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _base__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./base */ \"./js/base.js\");\n\r\n\r\nif(_base__WEBPACK_IMPORTED_MODULE_0__[\"open\"]){\r\n document.body.innerHTML = '<a href=\"signup.html\">注冊(cè)</a>';\r\n}else{\r\n document.body.innerHTML = '<div>請(qǐng)登錄</div>';\r\n}\r\n\n\n//# sourceURL=webpack:///./js/home.js?");
8 在前面打包的時(shí)候芬失，都是直接在pack楣黍，dev，build腳本里面直接指定將某個(gè)文件打包成
指定文件（例如添加這個(gè)語句：index.js -o index.bundle.js表示將index.js打包成index.bundle.js）棱烂。這樣很麻煩租漂，如果我們需要打包很多不同的文件，還需要一個(gè)一個(gè)寫腳本颊糜，于是我們可以使用另一種方法哩治，在webpack.config.js文件里面指定需要打包的文件。我們首先在更目錄下面創(chuàng)建webpack.config.js文件：
打開webpack.config.js文件按如下格式書寫：
module.exports = {
//入口
entry:{
//定義要打包的文件衬鱼，可以配置多個(gè)文件锚扎。
index:'./js/index.js',
home:'./js/home.js'
},
//出口
output:{
//定義要輸出的文件名稱 其中[name]就表示entry里面的index,home。
//__dirname表示當(dāng)前項(xiàng)目目錄 + /dist 表示項(xiàng)目下的dist文件夾（會(huì)自動(dòng)創(chuàng)建）馁启，最后被打包的文件都會(huì)保存在這個(gè)文件夾里面。
filename : '[name].bundle.js',
path : __dirname + '/dist'
}
};
9 現(xiàn)在可以將package.json文件中的的 pack，dev惯疙，build語句修改翠勉，刪除index.js -o index.bundle.js部分。然后在控制臺(tái)輸入npm run webpack開始打包霉颠。最后得到一個(gè)dist文件夾对碌，文件夾里面就是我們想要得到的打包文件：index.bundle.js，home.bundle.js蒿偎。
