"从一无所知，再到精熟技术。"本内容会在所有的打包知识点上会加入源码讲解。

1.webpack是什么

(a) webpack简介

webpack是一种前端构建工具，是一个静态模块打包器（module bundler）.在webpack看来，前端所有的资源文件（js/json/css/img...）都会作为模块处理。它将根据模块的依赖关系进行静态分析，然后打包生成对应的静态资源(bundle)。

(b) webpack打包流程概述

如下图所示，index.js为打包入口文件，webpack打包工具会以入口文件为起点,会将入口文件中的所有依赖记录好，形成依赖树状结构图;在index.js文件中，webpack会将jquery和less作为引入形成chunk(代码块);

形成chunk之后，chunk会被打包成浏览器可以识别的代码，例如less会被打包编译为css,es6以上的js语法会被编译为浏览器可识别语法，等等。打包完之后，文件就会得到输出，这个输出就叫bundle

3.webpack五个核心概念

(a) Entry

入口Entry是指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图

(b) Output

输出output指示webpack打包后的资源bundles输出到哪里去，以及如何命名.

(c) Loader

loader让webpack能够去处理那些非javascript文件(webpack自身只能识别js/json)

(d) Plugins

插件plugins可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等等

(e) Mode

模式mode指示webpack使用响应模式的配置

4.webpack的限制以及dev/pro环境的区别

1.运行指令：

开发环境：webpack ./src/index.js -o ./build/built.js --mode=development
webpack会以 ./src/index.js 为入口文件进行打包，输出到./build/built.js 
整体打包环境是开发环境

生产环境：webpack ./src/index.js -o ./build/built.js --mode=production
webpack会以 ./src/index.js 为入口文件进行打包，输出到./build/built.js 
整体打包环境是开发环境

2.总结：

• 1.webpack能处理js/json资源，不能处理css/img等其他资源
• 2.生产环境和开发环境将es6转译成浏览器识别的模块化
• 3.生产环境打包后的代码时压缩的

5.webpack loader 详解

loader让webpack能够去处理那些非javascript文件,loader必须要先定义配置文件然后再去配置,如我们想打包样式资源,首先创建webpack.config.js文件（名字随便取）.

入口index.js文件：

//引入样式
import './index.css'
import './index.less'

//load必须要定义配置文件去配置

webpack.config.js文件内容：

/*
    webpack.config.js webpack配置文件

    作用：指示webpack干哪些活(当你运行webpack指令时，会加载里面的配置)

    所有构建工具是都基于nodejs平台运行的，模块化默认采用commonjs
*/
//resolve 用来拼接绝对路径的方法
const {resolve} = require('path')

module.exports = {
    //入口起点
    entry:'./src/index.js',
    //输出
    output:{
        //输出文件名称
        filename:'built.js',
        //输出路径
        //__dirname nodejs的变量，代表当前文件的绝对路劲
        path:resolve(__dirname,'build')
    },
    //loader的配置
    module:{
        rules:[
            //详细loader配置
            //不同的文件必须配置不同loader
            {
                //匹配哪些文件
                test:/\.css$/,
                //使用哪些loader进行处理
                use:[
                    //use数组的执行顺序：从右到左
                    //创建style标签,将js中的样式资源插入到html header中
                    'style-loader',
                    //将css文件变成commonjs模块加载到js中,内容为样式字符串
                    'css-loader'
                ]
            },
            {
                //匹配哪些文件
                test:/\.less$/,
                //使用哪些loader进行处理
                use:[
                    //use数组的执行顺序：从右到左
                    //创建style标签,将js中的样式资源插入到html header中
                    'style-loader',
                    //将css文件变成commonjs模块加载到js中,内容为样式字符串
                    'css-loader',
                    //将less文件编译成css文件
                    'less-loader'
                ]
            }
        ]
    },
    plugins:[
        //详细plugins配置
    ],
    //模式
    mode:"development", //开发模式
    // mode:"production" //生产模式
}

6.webpack plugin 详解

插件plugins可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等等;plugins的使用步骤跟loader类似，但是plugins需要先下载然后再引入最后才使用;这里使用了一个打包html资源作为一个案例：

webpack.config.js文件：

/*
    loader:1,下载 2，使用
    plugins:1,下载 2，引入 3，使用
*/
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    //入口起点
    entry:'./src/index.js',
    //输出
    output:{
        //输出文件名称
        filename:'built.js',
        //输出路径
        //__dirname nodejs的变量，代表当前文件的绝对路劲
        path:resolve(__dirname,'build')
    },
    //loader的配置
    module:{
        rules:[
            //详细loader配置
        ]
    },
    plugins:[
        //详细plugins配置
        //功能：默认会创建一个空html，自动引入打包输出的所有资源
        new HtmlWebpackPlugin({
            //template::复制 './src/index.html'文件，并自动引入打包输出的所有资源
            template:'./src/index.html'
        })
    ],
    //模式
    mode:"development", //开发模式
    // mode:"production" //生产模式
}