webpack之基本概念

当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图会映射项目所需的每一个模块，并生成一个或多个 bundle

一、入口entry

webpack从入口文件开始找与其直接或间接的依赖来构建依赖图。入口能够有多个

module.exports = {
    entry: {
        app:'./path/index.js'
    }
}
复制代码

二、输出output

定义webpack建立的bundle输出在什么位置，以什么样的名字输出

const path = require('path');
module.exports = {
    ...
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'first-webpack.bundle.js'
    }
}
复制代码

三、loader

webpack只能识别js和json文件，loader 用于转换某些类型的模块。

经过（loader）预处理函数，loader 为 JavaScript 生态系统提供了更多能力

const path = require('path');
module.exports = {
    ...
    module: {
        relus: [
            {
                test: /\.(tsx|ts)$/,
                use: 'babel-loader'
            }
        ]
    }
}
复制代码

四、插件plugin

plugin功能极其强大，能够用来处理各类各样的任务，包括：打包优化，资源管理，注入环境变量等等。

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const webpack = require('webpack'); // 用于访问内置插件
const path = require('path');

module.exports = {
    ...
    plugins: [
        new HtmlWebpackPlugin({template: './src/template.html'})
    ]
}
复制代码

在上面的示例中，html-webpack-plugin 为应用程序生成 HTML 一个文件，并自动注入全部生成的 bundle。

webpack plugin是一个具备 apply 方法的 JavaScript 对象。apply 方法会被 webpack compiler 调用，而且 compiler 对象可在整个编译生命周期访问。

五、mode

经过选择 development, production 或 none 之中的一个。