手动搭建webpack（开发环境）

本人最近刚接触webpack，以下是我最近的一点收获特此分享出来，和大家共同探讨学习。如有不对的地方，请大家指正出来。

第一步：创建项目

打开cmd，cd到任意目录下，新建文件夹（项目），本例中项目名为sex-moon。创建后cd到该目录下，使用 npm init -y 命令生成 package.json 文件。该文件将会记录你项目的名称，配置信息，版本以及你安装的各种依赖。

第二步：安装 webpack 和 webpack-cli

在项目目录下执行一下命令：
npm intsall --save-dev webpack webpack-cli，这个命令的意思是将webpack和webpack-cli 安装到开发环境中。
另外在项目的根目录下创建一个webpack 的配置文件 webpack.config.js，并加入以下代码：

这里的引入webpack在后面会用的，这里先加上。

第三步：配置webpack，安装各种依赖，使其可以引入各种资源

1. 引入css

执行以下命令安装对应的loader：
npm install --save-dev style-loader css-loader
安装完成后需要在webpack的配置文件中加入以下代码：

这样就可以在js文件中引入css了。注意红框里loader的顺序不能错，否则会报错。

2. 引入图片

和引入css样，需要先安装对应的loader：
npm install --save-dev url-loader
在webpack配置文件中加入以下代码：

红框中的参数：
limit：表示当图片小于1024时，使用 url-loader处理。对于超过的图片会使用 file-loader 处理。
name：表示处理后文件的命名。

还有其他一些常用的loader，比如加载字体时用 file-loader，加载CSV、TSV 和 XML文件是用的 csv-loader 和 xml-loader 等，操作都大同小异，这里就不一一列举。如有疑问，请找度娘。

3. 配置webpack的输出

webpack 是一个前端资源的打包工具，既然要打包就要知道从哪开始打包，打包好后放在什么地方。这时就需要配置webpack的入口和出口了。在webpack配置文件中加入以下代码：

以上代码设置了一个入口和一个出口。其实在webpack中我们可以根据自身的需求设置多入口和多出口。如下：

4. 配置HtmlWebpackPlugin

首先让我们在项目下创建一个dist目录。在weppack配置文件中引入并使用HtmlWebpackPlugin。如下图红框部分：

使用 HtmlWebpackPlugin 会自动在项目目录下的dist目录下创建一个入口页面文件（index.html）,该文件会将把所有的bundle文件都自动引入进来并会覆盖之前的html文件。

5. 配置 source-map，报错提示

在开发中难免会出现代码错误。由于在浏览器中显示的是打包后的文件，所以不能精确的知道具体是哪个文件的哪行出错了，这十分不利于错误的修改。这时就需要用到 source-map，这里我用的是 inline-source-map。我们只需要在webpack的配置文件中加入以下代码就OK了。

注意 source-map 只限于在开发环境中使用

6. 配置 webpack-dev-server

在开发环境中每当我们修改一次代码需要看效果时都需要执行一遍npm run 命令，这在开发中会影响开发速度。而当我们配置了 webpack-dev-server 后就不再需要这么麻烦。
webpack-dev-server 的作用就是在我们的源代码改变后会自动编译并刷新浏览器。
首先让我们先安装 webpack-dev-server
npm install --save-dev webpack-dev-server
然后在webpack的配置文件中加入以下代码：

contentBase：它指定了服务器资源的根目录，如果不写contentBase，则默认是项目的目录。
inline：指定自动刷新模式。一共有两种刷新模式分别是Iframe mode和inline mode，至于两者的区别和用处这里不多说，想了解的可以问度娘。
historyApiFallback：本人不是很理解，暂时不说。
hot：热加载