一.webpack

    什么是webpack

           webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用

    为什么用webpack

            a:模块化，让我们可以把复杂的程序细化为小的文件;

            b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；

            c:scss，less等CSS预处理器

            这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为Webpack类的工具的出现提供了需求。

二.webpack安装

        1.安装webpack

                安装Node.js(Node.js 中文网)

                全局安装webpack,webpack-cli,webpack-dev-server

                        npm/cnpm install webpack webpack-cli webpack-dev-server -g

安装webpack webpack-cli webpack-dev-server

                安装完成

安装成功

          2.配置

                   创建一个项目(webpack),项目中建立三个文件夹dist,src,config，并在dist文件中添加入口文件index.js，src文件中添加index.html

                        dist:存放我们生产文件的地方

                        src:我们的源文件夹

                        config:配置文件文件夹

                    Init一个package.json文件npm init -y

安装package.json

                        配置完成目录如图

项目目录

                    3.打包

                                webpack --mode==devlopment

                                    --mode==devlopment是指环境为开发环境

                                    --mode==production

                                   会生成一个node_modules文件如图

打包

三：webpack配置插件

            1.在config文件中新建webpack.dev.js文件

             2.配置webpack.dev.js文件

                    如图:

webpack.dev.js配置

entry里的./src/main.js作为入口文件，需手动创建

在main.js中操作index.html弹出webapck字段

同时本地安装webpack webpack-cli以及webpack-dev-server如下两图

打包运行

安装本地webpack webpack-cli webpack-dev-server

运行：webpack-dev-server --config=config/webpack.dev.js

运行成功，同时表示热更新中...

            此时打开本地服务器配置的默认端口8080,会出现如下图所示效果，点击dist文件会出现效果：

效果图1

效果图2

此时会发现，服务器路径不是我们所想的访问8080即可弹出webpack字段

原因是因为没有配置本地服务器，没有配置默认路径

    下面来配置 本地服务器

配置本地服务器

配置过后重新打开，直接访问8080即可出现下图效果

最终效果图

4.加载css以及配置package.json文件

            1.在src文件夹想下新建一个main.css，在css中设置body的背景色为pink,并在main.js中引入

            2.安装style-loader与css-loader   cnpm install css-loader style-loader

                css-loader:解析css，遇到import的时候会引入相应的文件，计算成css

                style-loader：将计算的css放在style标签并放在head标签里

            3.配置loader

css-loader与style-loader配置

            4.重新打包刷新；

效果图

五：配置package.json

        当我们使用vue脚手架搭建项目时，当我们出现语法错误时，控制台以及浏览器会报错是为什么呢？

报错信息

            原因是因为webpack带有控制台默认报错提示信息功能，若想在浏览器同时显示报错信息需配置overlay

         1.配置overlay

                在webpack.dev.js中的devServer中配置overlay

配置overlay

        配置成功后，如有错误，控制台报错同时浏览器端也会报错

报错展示

           2.配置启动命令与打包命令

                    启动命令  webpack-dev-server --config=config/webpack.dev.js

                    打包命令  webpack --config=config-config/webpack.dev.js

                    我们会发现，webpack自带的启动与打包命令郭伟繁琐，如果简单化

                    我们需要配置package.json文件。在package.json文件中我们发现有script这个配置项如图

script默认配置项

                    我们删除test配置项并配置如图所示启动与打包命令

配置打包命令与运行命令

                        执行命令后发现：

运行启动打包命令

        后续更新，敬请期待...