写在前面
这篇博客也是参照别人的webpack入门，加上自己的一些操作，还有我在此过程中遇到的困难。如果是已经入门的或者这方面的高手，请绕行，也请勿吐槽,还有文章里可能有错别字，有些打错了的命令，会影响大家的进度，也可能误导大家，所以我命令大都是截图，一来这些命令我已经执行了，对的，二来为了不让你们偷懒复制粘贴，大家加油。
我们为什么要学习webpack
首先，我们为什么要学习前端自动化构建工具，我开始了解自动化构建工具的时候觉得很麻烦，要配环境，还要敲命令，就为了把那些文件都打包在一个叫bundle.js的文件里？那有什么意义？
看了半天文档，也没明白到底有啥好处。于是去参照了前辈的博客。
模块化，让我们可以把复杂的程序细化为小的文件;
类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；
Scss，less等CSS预处理器等等。
好了，现在我们明白，为什么要使用他了。
webpack工作方式
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
正式开始
在此之前需要安装node的环境，具体方法请百度。
第一步，新建 一个文件夹，这里我叫webpackstudy，然后使用命令行进入。
第二步，安装，如果你想其他的文件也可以使用，推荐安装全局的，否则的话就安装一个局部的。
全局安装：npm install -g webpack
安装到项目目录：npm install --save-dev webpack
这样一串显示完，就安装好了。
初始化项目：npm init
做完这个步骤后，在你的项目中会出现这个文件
输入npm init这个命令之后，命令行会提示你输入一系列的信息，如果不准备发布的话，一直回车就行了。
package.json文件已经就绪，我们在本项目中安装Webpack作为依赖包
// 安装Webpack
npm install --save-dev webpack
回到之前的空文件夹，并在里面创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）。接下来我们再创建三个文件:
index.html ——放在public文件夹中;
Greeter.js ——放在app文件夹中;
main.js ——放在app文件夹中;
文件夹的结构如下：
我们在index.html中写如下代码，他的目的是为了引入打包后的js文件bundle.js
[endif]
在Greeter.js中写如下代码，这个文件的作用是，为了给index页面创建结点并插入语句
[endif]
在main.js中写如下语句：
[endif]
现在开始正式使用webpack来运行我们写的这个项目
语法是这样的：
webpack {entry file} {destination for bundled file}
（注意：不要花括号，entry file是你的入口文件，destination
for boundled file 是你的打包后的目标文件）
我们这里输入：webpack app/main.js public/bundled.js
但是我做到这一步就出现了问题，看看你们是不是和我一样的报错，如果你们没有我这些报错，直接执行成功，可以接着看后面的，忽略我的这些问题，继续的地方，下面有深红色文字提示：
哇塞，我根据提示输入了npm install webpack-cli -D，再次打包，还是报这个错，我百度了一下，发现是我使用了全局的打包语句，于是我又换了局部的打包语句：node_modules/.bin/webpack app/main.js public/bundle.js，还是不行，真的是，我明明就安装的全局的webpack，心态爆哈哈哈炸！
于是我又继续找，发现我没有安装全局的webpack-cli，于是我又安装了一个全局的webpack-cli。语句如下：npm install webpack-cli -g。
走到这，我又继续打包。。。
又爆出了错，但是看上面明明已经将那三个js文件构建好了，但下面又爆红，接下来，我们继续看看是什么原因。我发现好像上面的的才是关键的提示信息。它告诉我们要设置一个mode。我找到一个网友相关的解答：
再往上翻，看我的webpack版本号，哦，我的是新的，4.1.1了，好像要使用新的方法，不能再使用这种老的命令行的方式去运行他。因此我们在webpackstudy文件夹下新建一个webpack.config.js文件。
在里面加上：
现在我们再来打包一次，这次不需要输上次那些语句，只需要输入一个webpack
bingo！！！成功，有没有一点小小的喜悦了，[if !vml]
现在打开index.html
[endif]
看，我之前添加进结点的那句话出现了吧。
如果没有上面的问题，直接就运行好了，那么接着从这里往下看。
更快捷的打包方式
打开package.json文件 ，找到scripts，在里面添加那句start
现在我们使用npm start来代替之前输入的webpack
现在我们看他运行的顺序，我发现他还是去找了webpack嘛，切，感觉好没意思啊。
耐着性子继续往下看。。。
我们继续来丰满他的骨架。
方便调试
开发总离不开调试的吧？
但是我们这样打包之后，怎么知道自己哪行错了？
webpack提供了一种devtool为我么生成source map，主要是提供一种编译文件对应源文件的方式。这样就方便我们调试了啊。
来看看webpack给我们提供了哪些devtool，敲黑板划重点！！
综上，我们在开发阶段可以选择第三个，因此我在这用第三个试试水，如果读者想要试试其他的，可以用稍微大型点的项目，能看得出差异。
打开webpack.config.js，加上如下语句。
devtool:'eval-source-map'
再次打包：
可以看到，之前打包是138ms，现在加上这个source map之后成了143ms。确实慢了点点点点。。。
可能在较大的项目里才能看出区别。
构建一个webpack本地服务器
哎呀，这样每次修改代码就要去重新打包一下项目，然后再去浏览器刷新，觉得好麻烦啊。
如果可以像sublime一样，和谷歌一起动态刷新是不是很酷
这个功能的实现基于node.js，闲话少说，我们先安装这个组件。
npm install --save-dev webpack-dev-server
好了安装成功，[if !vml]
devserver是webpack的一个配置，可以看看他的配置选项----click me
下面列出一些，因为我这里要用一些。【微笑脸】
[endif]
来，配置webpack.config.js
[endif]
配置好之后再去package.json中去配命令，一样是之前的script里添加：
去命令行里运行咯：
运行成功之后，浏览器自动跳出了我的index.html，不过，这次的路径和上次直接双击打开的不同了。来瞅瞅
想试试能不能自动刷新，恩，我去给字改个颜色。
过去浏览器刷新，行了。
还是没啥激动的，就跟我平时使用编译器，按了ctrl+s之后去浏览器刷新就能生效一样。
这篇简单入门就到这了，当然webpack那么流行，使用的猿猿那么多，当然不止这些功能。他到哪里神奇，你想知道吗？哈巧了，我也想知道。功能性的学习，会在之后的博客中写出来。想继续学习吗？记得关注我之后的博客，我会继续学习，并继续跟进博客。
网友评论