webpack核心概念.md

一、webpack四大核心

1.入口(entry)
2.出口(output)
3.loader
4.插件(plugins)

二、Entry

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

简单理解：

1.代码入口
2.打包入口
3.单个或多个入口
4.多个入口：多页面应用程序；或分开的。

示例：

// 单个入口文件
module.exports = {
    entry: 'index.js'
}

// 多个入口文件
module.exports = {
    entry: ['index.js', 'vendor.js']
}

// 另外写法，推荐写法，指定键值
module.exports = {
    entry: {
        index: 'index.js'
    }
}

module.exports = {
    entry: {
        index: 'index.js',
        vendor: 'vendor.js'
    }
}

module.exports = {
    entry: {
        index: ['index.js', 'app.js'],
        vendor: 'vendor.js'
    }
}

三、Output

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

简单理解：

1.打包成的文件（bundle）
2.一个或多个
3.自定义规则

示例：

// 单个打包输出文件
module.exports = {
    entry: {
        index: 'index.js'
    },
    output: {
        filename: 'index.min.js'
    },
}

// 多个打包输出文件
module.exports = {
    entry: {
        index: 'index.js',
        vendor: 'vendor.js'
    },
    output: {
        filename: '[name].min.[hash:5].js'
    }
}

四、Loaders

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

1.处理文件
2.转化为模块

示例：

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: 'css-loader'
            }
        ]
    }
}

五、Plugins

插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！插件目的在于解决 loader 无法实现的其他事。

其作用:

1.参与打包整个过程
2.打包优化和压缩
3.配置编译时的变量
4.极其灵活的

示例：

const webpack = require("webpack");

module.exports = {
    plugins: [
        new webpack.optimize.UglifyJsPlugin()
    ]
}