使用npm安装webpack报错：
Refusing to install package with name "webpack" under a package
报错原因：package.json文件的name包含名称webpack。
webpack4.x打包总结：
1 使用语句：npm install webpack webpack-cli -D 安装webpack和webpack-cli。
2 使用语句：npm init -y 进行初始化。
3 安装完毕并初始化之后，我们多了一个package.json文件(内容如下)：
{
"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"
需要注意两个问题：(1) 需要进入node_modules/.bin/webpack，不能直接使用webpack来打包（会重复提示安装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（可自行创建）打包，输出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......
执行pack打包的时候提示黄色警告，而且观察上述home.bundle.js文件，发现并不是我们想要的文件，这是因为webpack4.x之后引入了mode（模式）：一个是开发环境：development ，另外一个是生产环境：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语句。打包之后不在有黄色的警告了，说明打包成功了。最后我们在home.bundle.js文件里面写的内容被打包成了这样:
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\">注册</a>';\r\n}else{\r\n document.body.innerHTML = '<div>请登录</div>';\r\n}\r\n\n\n//# sourceURL=webpack:///./js/home.js?");
8 在前面打包的时候，都是直接在pack，dev，build脚本里面直接指定将某个文件打包成
指定文件（例如添加这个语句：index.js -o index.bundle.js表示将index.js打包成index.bundle.js）。这样很麻烦，如果我们需要打包很多不同的文件，还需要一个一个写脚本，于是我们可以使用另一种方法，在webpack.config.js文件里面指定需要打包的文件。我们首先在更目录下面创建webpack.config.js文件：
打开webpack.config.js文件按如下格式书写：
module.exports = {
//入口
entry:{
//定义要打包的文件，可以配置多个文件。
index:'./js/index.js',
home:'./js/home.js'
},
//出口
output:{
//定义要输出的文件名称 其中[name]就表示entry里面的index,home。
//__dirname表示当前项目目录 + /dist 表示项目下的dist文件夹（会自动创建），最后被打包的文件都会保存在这个文件夹里面。
filename : '[name].bundle.js',
path : __dirname + '/dist'
}
};
9 现在可以将package.json文件中的的 pack，dev，build语句修改，删除index.js -o index.bundle.js部分。然后在控制台输入npm run webpack开始打包。最后得到一个dist文件夹，文件夹里面就是我们想要得到的打包文件：index.bundle.js，home.bundle.js。
