1、创建项目
这里用的是命令创建项目，当然你也可以去鼠标右键创建项目
mkdir webpackDemo// 创建项目
cd webpackDemo// 进入项目
mkdir app// 在项目中创建app文件
mkdir common// 在项目中创建common文件
cd app// 进入app文件夹touch
app.js// 创建app.js文件
touch main.js// 创建main.js
文件cd..//返回到webpackDemo项目根目录
cd common// 进入common文件
touch index.html// 创建index.html文件
mkdir：创建文件夹
cd ..：返回所在目录的上级目录
touch：创建文件
app：用来存放原始数据和我们将写的JavaScript模块
common：用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）
目录结构
基础代码
index.html是主入口，需要设置根目录并且将打包后的文件导入
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
app.js是我们写的模块,并依据CommonJS规范导出这个模块,这里我们以输出welcome to use webpack为例
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());
2、安装
因为安装webpack要用npm,所以安装之前我们首先要安装node
第一步 要在项目根目录用npm init初始化，生成package.json文件
npm init
初始化过程中会有好多提示，如果非正式项目下可以直接回车调过，括号里的都是默认的,正式项目下可以根据情况填写每一步
name: (webpackDemo) // 项目名称
version: (1.0.0) // 版本号
description: // 项目的描述
entry point: (index.js) // 入口文件
test command: // 测试命令
git repository: // git仓库
keywords: // 关键字
author: // 作者创始人
license: (ISC) //许可:(ISC)
About to write to C:\Users\Administrator\Desktop\webpackDemo\package.json:
{
"name": "webpackdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes) // 这里直接输入yes就可以了
第二步 安装webpack
npm install webpack -g // 全局安装
如果不想安装最新的版本那么得在webpack后面加一个@然后在填入你要安装的版本号，当然安装最新版本时可以加@版本号也可以不加@版本号
npm install webpack@xx -g
sudo npm install webpack@3.5.6 -save-dev//我mac没权限，需要加上sudo
接下来看下配置文件
{
"name": "webpackdemo",
"version": "1.0.0",
"description": "test",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.5.6"
}
}
注意：package.json文件中不能有注释，在运行的时候请将注释删除
第三步 使用Webpack打包方式一
webpack可以在终端中使用，基本的使用方法如下：
node_modules/.bin/webpack app/main.js common/index.js
打包成功后目录：
接下来我们看下页面：
说明我们已经将welcome to use webpack!在页面打包生成，但是这种方式需要在终端运行复杂的命令而且容易出错很不方便，如果能更方便点就好了，那么接下来我们在看下它的升级版打包。
第三步 使用Webpack打包方式二
Webpack拥有很多其它的比较高级的功能，这些功能其实都可以通过命令行模式实现，但是在终端中进行复杂的操作，这样不太方便且容易出错的，更好的办法是定义一个配置文件，这个配置文件其实也是一个简单的JavaScript模块，我们可以把所有的与打包相关的信息放在里面。
在当前项目webpackDemo文件夹下新创建一个文件webpack.config.js,写入简单的配置代码，目前的配置主要涉及到的内容是入口文件路径和打包后文件的存放路径
touch webpack.config.js
webpack.config.js配置如下：
module.exports = {
entry: __dirname + "/app/main.js", // 之前提到的唯一入口文件
output: {
path: __dirname + "/common", // 打包后的文件存放的地方
filename: "index.js" // 打包后输出文件的文件名
}
}
注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
有了这个配置之后，再打包文件，只需在终端里运行webpack(全局情况下)或node_modules/.bin/webpack(非全局安装需使用)命令就可以了，不需要再命令行打入主入口和打包文件的路径了，这条命令会自动引用webpack.config.js文件中的配置选项
node_modules/.bin/webpack
第三步 使用Webpack打包方式三
根据上面的方式来看我们只要配置了webpack.config.js就可以将打包的路径命令省去，那么我们想是否可以以这种方式将node_modules/.bin/webpack命令省去呢？ 答案是可以，只不过不是在这个文件内配置，也不用去新建文件配置。
npm可以引导任务执行，对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可，设置方法如下。
{
"name": "webpackdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.5.6"
}
}
注：package.json中的script会安装一定顺序寻找命令对应位置，本地的node_modules/.bin路径就在这个寻找清单中，所以无论是全局还是局部安装的Webpack，你都不需要写前面那指明详细的路径了。
npm的start命令是一个特殊的脚本名称，其特殊性表现在，在命令行中使用npm start就可以执行其对于的命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}如npm run build，我们在命令行中输入npm start，看看输出结果是什么，输出结果如下：
现在只需要使用npm start就可以打包文件了
