webpack打包的核心思路

初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler

编译：从 Entry入口文件出发，针对每个 Module 串行调用对应的 Loader 去翻译文件的内容，再找到该 Module 依赖的 Module，递归地进行编译处理

输出：将编译后的 Module 组合成 Chunk，将 Chunk 转换成文件，输出到文件系统中

5. 一个简单的webpack配置示例

const path = require(‘path’);

const webpack = require(‘webpack’);

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

module.exports = {

    entry: path.resolve(__dirname, ‘../src/index.js’), //指定入口文件，程序从这里开始编译,__dirname当前所在目录, ../表示上一级目录, ./同级目录

    output: {

        path: path.resolve(__dirname, ‘../dist’), // 输出的路径

        filename: ‘app/[name]_[hash:8].js’  // 打包后文件

    },

    module: {

        rules: [

            {

                test: /.(js|jsx)$/,

                use: {

                    loader: ‘babel-loader’,

                    options: {

                        presets: [‘es2015’, ‘react’],

                    }

                },

                exclude: /node_modules/

            }

        ]

    },

　　 plugins: [//plugin下的插件

　　 　　new HtmlWebpackPlugin({

　　　　 　　template: path.resolve(__dirname, ‘../src/index.template.html’),

　　　　　　 inject: true

　　　　 })

　　 ]

loader下：

babel-loader: babel加载器

babel-preset-es2015: 支持es2015

babel-preset-react: jsx 转换成js

loader是支持以数组的形式配置多个的，当Webpack在转换该文件类型的时候，会按顺序链式调用每一个loader，前一个loader返回的内容会作为下一个loader的入参。

plugin下：

html-webapck-plugin插件的两个主要作用：

为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题

可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口

webpack基于发布订阅模式，在运行的生命周期中会广播出许多事件，plugin插件通过监听这些事件，就可以在特定的阶段执行自己的插件任务，从而实现自己想要的功能。

一些常见的loader和plugin可以看看这里,最好对这些有个大概了解和记忆。。