webpack详解（2）

一、通过配置文件使用webpack

    |--为什么用配置文件：因为在终端输入命令打包文件，太麻烦了，要写命令，还有输入文件路径等。不能
    接受！
    |--使用配置文件使用webpack步骤：
        |--1.在项目根目录下创建文件webpack.config.js

两种方式都可以

        |--2.配置完，直接在项目更目录下，输入webpack即可完成打包：

        |--3.浏览器打开index.html

bundle.js生成 内容被渲染

二、更方便的配置方式（package.json）

    |--问题：通过配置webpack.config.json，我们只需要在终端输入webpack，就能进行打包了。但是因为我们打包的文件非常简单，所以看上去很简单，如果打包的同时还有更多的操作，依然要输入很多命令，如何解决呢？
    |--解决：配置好webpack.config.json后，设置package.json：

默认package.json 添加start:webpack

    |--注意：start命令比较特殊，可以直接npm + start就可以执行了，如果我们想自定义打包名字，如：build，
    那么就要指定npm run build
    |--下面让我们执行：npm start试一试，看看能否顺利打包。

打包成功 自定义命令名

三、webpack构建本地服务器

    |--为什么要构建本地服务器：因为我们访问页面的时候，要通过打开本地文件，不符合开发逻辑，正常开发
    代码都是放在开发服务器上，没有说在本地打开的，用Vue,React框架时，都是运行在本地的服务器上。
    |--使用webpack如何构建本地服务器：webpack-dev-server
        |--webpack提供了一个基于nodejs构建的本地开发服务器，他是单独的一个组件，在webpack中进行配置
        前需要安装他作为项目依赖：

安装命令 安装成功

        |--在webpack.config.js配置：

webpack.config.js配置devServer

        |--接下来，配置package.json

配置package.json

        |--注意：一个dev代替了两个命令webpack-dev-sever + --open这就是使用配置文件的优点！！
        |--开启服务器把：npm run dev

开启服务器 启动成功！ 访问localhost：8088

        |--这里需要注意一点：

安装的时候都要指定以便-S和-D

四、打包后的代码调试（source-map）

    |--服务器也会创建了，也会对文件进行打包了，那么打包后的文件因为是经过优化的，显示为一行，无法
    进行调试，如何解决这个问题呢？先来看一下打包后文件的格式：

无可读性的打包后文件

    |--解决办法：配置webpack.config.js文件：

生成.map文件

    |--配置完，进行打包：

打包