Webpack详细入门教程（二）之安装配置
Webpack详细入门教程之安装配置
安装
Webpack可以使用npm安装，新建一个空的练习文件夹（此处命名为webpack），在终端中转到该文件夹后执行下述指令就可以完成安装。
1.全局安装 (npm install -g webpack)
2.进入项目目录(F:\webpack)安装(npm install --save-dev webpack)
项目目录中会生成一个node_modules文件夹
3.在项目下生成package.json文件(npm init)
输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。
注：如果先npm init 再 npm install --save-dev webpack 且项目文件名为 webpack 则会报错
创建项目结构
1.创建如下目录结构
2.1在demo的js下创建一个入口文件main.js
2.2在项目目录创建一个index.html用来调试使用
2.3在项目目录创建一个out文件夹用来存放输出文件
2.4在项目目录创建webpack.config.js配置文件
3.配置webpack.config.js文件
首先介绍几个配置文件的参数.
- entry： 是 页面入口文件配置 （html文件引入唯一的js 文件）
- output：对应输出项配置
- path ：入口文件最终要输出到哪里，
- filename：输出文件的名称
- publicPath：公共资源路径
//webpack.config.js
module.exports = {
entry : __dirname + '/demo/js/main.js',//入口文件
output : {//输出文件
filename : 'index.js',//输出文件名
path : __dirname + '/out'//输出文件路径
},
}
注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。（这里相当于 ./）
4.index.html和main.js
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<script src="out/index.js"></script>
</body>
</html>
//main.js
document.write('Hellow Webpack!');
之后使用Git Bash here 或者 cmd cd命令使目录为当前项目目录, 输入webpack或者webpack -w命令, out文件夹下会生成index.js
打开index.html将会在页面正常显示 Hellow Webpack!，如下图
webpack 和 webpack -w 区别 :
webpack -w可以对项目打包并且实时监控, 当前配置文件下的文件如果发生更改时重新打包(修改后刷新页面即可),
但如果webpack的配置文件即webpack.config.js更改时还是要通过webpack进行打包.(退出webpack -w 操作 (ctrl+c)
更快捷的执行打包任务
在命令行中输入命令需要代码类似于node_modules/.bin/webpack这样的路径其实是比较烦人的，不过值得庆幸的是npm可以引导任务执行，对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可，设置方法如下:
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"webpack": "^3.8.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"build": "webpack -w"
},
"author": "",
"license": "ISC"
}
注：package.json中的script会按照一定顺序寻找命令对应位置，本地的node_modules/.bin路径就在这个寻找清单中，所以无论是全局还是局部安装的Webpack，你都不需要写前面那指明详细的路径了。
npm的start命令是一个特殊的脚本名称，其特殊性表现在，在命令行中使用npm start就可以执行其对于的命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}如npm run build，如下：
现在只需要使用npm start(webpack) 或 npm run build (webpack -w) 就可以打包文件啦~
