捂脸~~~~ 都9102年了，现在还来谈webpack的配置，是不是有点不合适哪（我不管！），基于vue-cli或者create-react-app生成的项目，也已经一键为我们配置好了webpack，看起来似乎并不需要我们深入了解。不过呢，自己尝试去搭建一下webpack的 开发环境玩一下也是极好的~~

webpack：模块化兼打包工具，可以把复杂得程序细化为小的文件，通过一个入口文件,找到你的项目得所有依赖的文件使用loaders处理它们，最后打包成为一个（或者多个）浏览器可以识别的javascript文件。

作用：

        1、模块化，让我们把程序可以细化为细小的文件；

        2、类似于TypeScript这种在javaScript基础上拓展的开发语言：使我们能够实现目前版本的javaScript不能直接使用的特性。并且之后还能转换为Javascript文件是浏览器可以识别。

        3、可以使用，less，SCss等scss预处理器。

webpack与gulp区别：

    webpack是一种模块化的解决方案，可以把各种资源都作为模块来使用或处理。

    gulp是一种能能够优化前端的开发流程的工具，侧重于前端开发得整个过程得控制管理，通过一系列插件将原本复杂繁琐得任务自动化，并不能将除了js之外的资源模块化。

    webpack的优点使得webpack在很多场景下可以替代gulp类的工具。

webpack的基本配置项：

    入口文件；entry

    出口文件；output

    module：css，js，img都叫做module，打包在module中进行。

            rules就是louders的配置项。

    pulgins：webpack的插件。

    resolves：webpack的配置项。（例：在vue中有@可以代表src，能够通过@代表src就是因为在webpack中进行了配置）

webpack的基本使用：

    1、全局安装：

       npm install webpack@3 -g

    2、创建文件夹-初始化：

        npm init -y

    3、局部安装webpack：

       npm install webpack@3 -S

    4、在文件夹下创建webpack.config.js文件：

    5、创建src目录在其中创建main.js

    6、插件-htmlwebpackplugin-(在dist中生成一个引入了js的html文件)

        安装：npm install html-webpack-plugin -S

        使用方法：在文件中引入后；

                在plugins中new一个htmlwebpackplugin对象

                有两个必传的参数:

                    1、template（模版）

                    2、filename：(生成文件的名称)

                不必须参数;

                    1、title（在html中使用ejs模版型语法）

    7、插件-创建服务器-webpackdevserver（开启服务实现热更新）

        安装：npm install webpack-dev-server@2 -S

        使用方法：在package.json的scripts中增加指令“dev”：“webpack-dev-server”（启动一下）

  8、插件-打包js文件-

        安装：npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react

    9、插件-打包css，scss文件-

        安装：npm install --save-dev style-loader css-loader sass-loader node-loader

webpack.config.js文件内容如下：

好啦 就是这个样子啦，略糙，见谅~