说明
本文原创，原文地址请看我的github的相关内容。
- 本开发基于mac os
- 带
.是无序的，先后顺序可以调换。带1,2...是有序的，先后顺序不可以调换。 - 阅读需要有基础的webpack的知识
前置条件
- 需要安装node
- 需要全局安装webpack -- 执行"npm install webpack -g"
part zero 新建项目
1.cd desktop
2.mkdir your_project_name && cd your_project_name
3.npm init -y (注意，使用的-y之后一切都是默认的)
3.npm init (注意，回车后请按提示进行输入)
[注意，两个步骤3，请选择其中一个进行，推荐使用 npm init]
4.npm install --save-dev webpack
part one 基本搭建
1.进入你的根目录
2.如下：
- 在根目录下，添加src文件夹，并在此文件夹下面新建
index.js，并在index.js文件内写入下面的内容：
console.log("webpack demo");
- 在根目录下，新建一个名为
webpack.config.js文件，并在当前文件输入一下的内容：
const path = require(‘path‘);
module.exports = {
entry:[//入口文件
‘./src/index‘
],
output:{
path:path.join(__dirname,‘dist‘),//出口文件的路径
filename:‘bundle.js‘,//打包后的文件名
publicPath:‘/‘//公共路径名，当前根目录为root
}
}
通过以上的两个步骤，可以执行下命令行中，进入根目录并执行webpack指令。执行了本条指令后，会自动找到webpack.config.js文件进行操作。得到的结果是：根目录多出了一个dist文件夹，里面包含bundle.js文件。
- 在根目录下，新建一个文件夹，并在此文件夹下面新建
index.html，并在本文件中，添加如下的内容：
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
</head>
<body>
<p>webpack demo</p>
<!--引入webpack打包后的javascript文件-->
<script type="text/javascript" src="../dist/bundle.js"></script>
</body>
</html>
经过上面的三个步骤之后，你可以打开static下面的文件index.html，并在浏览器上运行。结果是；在浏览器的控制台下面看到 "webpack demo" 的字。
3.更改webpack.config.js为webpack.config.dev.js
原因：我们是在开发环境下面进行开发的，改名称有下面两个好处：
- 改名称能够更加清楚文件代表的意义。
- 能够更好的管理文件。
注意，更改名称之后，你不能够在控制台上面直接执行webpack命令了。而是执行命令webpack --config webpack.config.dev.js。是不是看着执行那么一长串的命令很是别扭，下面介绍一下使用npm 方式执行的命令：
本身默认的生成的文件结构里面（我是使用npm init生成的），有那么一个文件package.json，里面的本身的内容如下：
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "webpack demo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"webpack"
],
"author": "reng",
"license": "ISC",
"devDependencies": {
"webpack": "^3.0.0"
}
}
下面在package.json文件里面的script字段里面添加一些信息，如下：
...
"scripts": {
"dev":"webpack --config webpack.config.dev.js",
"test": "echo \"Error: no test specified\" && exit 1"
}
...
完成上面的内容之后，就在控制台可以执行npm run dev的指令，这样的执行跟在控制台上面执行webpack --config webpack.config.dev.js得到的结果一模一样的了。很是神奇是吧，熟悉node开发的人应该知道这个npm run dev哈。如果你想实时监听文件的打包的话，需要改动package.json文件对应的scripts字段的字段如下：
...
"scripts": {
"dev":"webpack --config webpack.config.dev.js --watch",
"test": "echo \"Error: no test specified\" && exit 1"
}
...
4.页面更改为本地(localhost)执行
细心的人儿应该发现了在浏览器上面浏览的地址是酱紫的呢--file:///Users/reng/Desktop/webpack-demo/static/index.html。如果我们要通过localhost（127.0.0.1）来查看，那咋办呢。这就使用到了webpack-dev-server了呢。
4.1首先安装一下相关的依赖:npm install --save-dev webpack-dev-server
4.2接下来就要修改一下package.json文件对应的scripts字段的内容了。如下：
...
"scripts": {
"dev":"webpack-dev-server --config webpack.config.dev.js --port 6066",//更改端口号
"test": "echo \"Error: no test specified\" && exit 1"
},
...
- 在
webpack.config.dev.js中进行修改,
...
devServer:{
port:9000,//更改监听的端口号，默认的端口号是8080
}
...
上面提供的两种更改端口号的方法你可以根据个人喜好来用，个人比较喜欢第二种，和 devServer字段放在 一起比较好管理哈（后期这个字段会增加内容的，详情请接着往下看哦）
5.实现热加载
在开发的过程中，文件的变化的话，应该带来浏览器的自动刷新，这样就不用手动去刷新浏览器查看效果，加快了开发的效率。
自动刷新页面的话，就要在webpack.config.js中添加.html的模版了。需要使用到html-webpack-plugin。使用的步骤如下：
5.1在控制台通过npm install html-webpack-plugin --save-dev
html-webpack-plugin插件，这个插件可以创建html文件，并自动将依赖写入html文件中。
5.2对webpack.config.dev.js的内容做下更改：
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
...
devServer:{
port:9000,//端口号
contentBase:path.join(__dirname,"dist"),//告诉服务器从哪来提供内容
publicPath:"/"
},
plugins:[
new HtmlWebpackPlugin({
template:‘.static/index.html‘//大包后的javascript自动绑定到模版中
})
]
...
}
最终文档描述的项目的结构请见：webpack-demo
5.3执行"npm run dev"
在浏览器上打开控制台上面提示的localhost:9000访问。修改istatic/ndex.html页面自动刷新，修改相关的src/index.js,不用刷新就可以查看相关的效果。到这里，webpack先告一段落了咯。
你可以到这里查看本webpack文档涉及到的整个项目，感兴趣的话可以将那个项目下载下来，在本地上运行运行哦！??
延伸的内容和本文档有继承和被继承的关系（本文档）延伸的地址webpack_extend01