webpack概述

英文官网：https://webpack.github.io/

中文官网：https://www.webpackjs.com/

webpack v3

        Scope Hoisting (作用于提升)

        打包以后代码性能的提升，并不是打包的提升，是打包后文件的性能的提升

        Magic Comments（配合动态import使用）

        指定打包以后的文件名叫什么

        v1-v2

        v2-v3

        webpack核心概念

        Entry

        Output

        Loadedrs

        Plugins

1. Entry

    a)代码的入口

        某一段代码的代码入口，通过代码的入口直接或者间接的找到

    b)打包的入口

    c)单个或多个入口

        eg:

            module.exports = {

                entry:'index.js'

            }

            数组

            module.exports = {

                entry:['index.js','vendor.js']

            }

            对象（推荐）

            module.exports = {

            entry:{

                index:'index.js'，

                vendor:'vendor.js'

                }

            }

---

2. Output

    a)打包成的文件（bundle）

    b)一个或多个

    c)自定义规则

    d)配合CDN

    eg:

    module.exports = {

        entry: {

            index:'index.js',

            vendor:'cendor'

        },

        output: {

            filename:'[name].min.[hash:5].js'

        }

    }

---

3.Loaders

    处理文件

    转化为模块

    eg:

    module.exports = {

        module: {

            rules: [

                {

                    test:/\.css$/,

                    use:'css-loader'

                }

            ]

        }

    }

    常用Loader

    编译相关

        babel-loader、ts-loader

    样式相关

        style-loader、css-loader、less-loader、postcss-loader

    文件相关

        file-loader、url-loader

---

4.Plugins

    a)参与打包整个过程

    b)打包优化和压缩

    c)配置编译时的变量

    d)及其灵活

    eg:

    const webpack = require('webpack');

    module.exports = {

        plugins: [

            new wbpack.optimize.UglifyJsPlugin()

        ]

    }

    常用的Plugins

    优化相关

        CommonsChunkPlugin 用来提取不同的Chunk之间提取相同的代码出来

        UglifyjsWebpackPlugiin相当于混淆，压缩代码

    功能相关

        ExtractTextWebpackPlugin提取出单独的文件，单独打包

        HtmlWebpackPlugin帮助生成HTML

        HotModuleReplacementPlugin模块热更行

        CopyWebpackPlugin帮你将项目中已经打包好的文件

    相关名词

        Chunk 代码块

        Bundle说明已经打包后的代码

        Module模块