webpack简述

webpack在本质上是一个用于现代javascript应用程序的静态模块打包工具；

通俗来说它就是一个前端自动化打包工具，它的使用是基于Node和npm的.

据我的理解，他是一个可以把众多文件打包到一起，然后疏通脉络并建立连接的一个打包工具.

视图如下：

webpack配置项属性：

        （1）entry 

                入口起点（entry point），指示webpack应该适应哪个模块来作为构建其内部依赖图(dependency graph)的开始，进入入口起点之后，webpack会找出有哪些模块和库是入口起点(直接或间接)依赖的。

        （2）output

                output属性告诉我们webpack在哪里输出它所创建的bundle，以及如何命名这些文件，主要输出的默认文件名为：./dome/main.js,其他生成文件默认放置在./dist文件夹当中。

                我们也可以通过在配置中指定一个output字段来配置这些处理过程。

        （3）mode

                通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

         （4） plugin

                插件 是 webpack 的 支柱 功能。Webpack 自身也是构建于你在 webpack 配置中用到的 相同的插件系统 之上！

插件目的在于解决 loader 无法实现的其他事。Webpack 提供很多开箱即用的 插件

         （5）loader

                loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 "load(加载)" 模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的得力方式。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS 文件

webpack的使用：

        1， 安装

                我们使用的webpack的前提是我们要先cmd在后台安装webpack和webpack-cli这两个插件。安装命令如下：

npm install webpack webpack-cli --save-dev

       2， 基础使用

               第一步，我们要先新建一个工程夹：webpack_dome

               第二步：在cmd后台初始化工程

npm init -y

                第三步：在工程的根目录下，新建src文件夹和index.js文件

                第四步：在根目录下，新建webpack.config.js文件

                第五步：在package.json文件中的scripts中新增命令：“dev”:"webpack"

                第六步：在终端中运行npm run dev命令进行打包,

          2.1 webpack.pack.js的基础配置，如下图：

let path=require('path');

//webpack的打包配置
module.exports = {
    entry: "./src/index.js",//入口文件
    output: {        //出口文件
        filename: 'bundle.js', // 打包后的⽂件名称
        path: path.resolv