webpack的基本使用

webpack是什么？

根据官网的解释：

本质上，webpack是一个用于现代JavaScript应用程序的，静态模块打包工具，当webpack处理应用程序时，它会在内部从一个或者多个入口构建以个依赖图，然后将你项目中所需要的每一个模块组合成一个或者多个bundles，它们均为静态资源，用于展示你的内容

在开始实例之前，需要了解一下一些核心概念

入口（entry）

输出（output）

loader

插件（pligin）

模式（mode）

浏览器兼容性（browser compatibilirty）

环境（environment）

入口（entry）

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

默认值是./src/index.js , 但你可以通过webpackconfiguration中配置entry属性，来指定一个（或者多个）不同的入口起点，例如：

webpack.json.js

moudle.rxports = {
    entry:'main.js',
}

输出（output）

output属性高速webpack在哪里输出它所创建的bundle，以及如何命名这些文件，主要2输出文件的默认值是./dist/main.js , 其他生成的文件默认放置在, ./dist 文件夹中

你可以通过在配置中制定一个output字段，来配置这些处理过程：

webpack.config.js

const path = require('path')
moudle.exports = {
    entry:'main.js',
    output:{
        path:path.resolve(__dirname,'dist')
        filename:'bundle.js'
    }
}

在上面的实例中，我们通过output.filename和output.path属性，来告诉webpack bundle 的名称，以及我们想要bundle生成（emit）到哪里，可能你想要了解在代码最上面导入的path模块是什么，它是一个node.js核心模块，用于操作文件路径。

loader

webpack只能理解JavaScript和JSON文件，这是webpack开箱可用的自带能力，loader让webpack能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及添加到依赖图中。

在更高层面在webpack的配置中，loader有两个属性：

1. test属性，识别出哪些文件会被转换

2. use属性，定义出在进行转换时，应该使用哪个loader

webpack.config.js

const path = require('path')

moudle.exports = {
    output:{
        filename:'mbundle.js',
    },
    moudle:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ],
    },
};

以上配置中对一个单独的module对象定义了rules属性，里面包含两个必须属性：test和use。

插件（plugin）

loader用于转换某些类型的模块，而插件则可以用于执行范围内更广的任务。包括：打包优化，资源管理，注入环境变量。

想要使用一个插件，你只需要require（）它，然后把它添加到plugins数组中。多数插件可以通过选项（option）自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这是需要通过使用new操作符来创建一个插件实例。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');//通过npm安装
const webpack = requre('webpack')//用于访问内置插件
modile.exports = {
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ],
    },
    plugins:[new HtmlWebpackPlugin({template:'./src/index.html'})],
}

模式（mode）

通过选择develop,production或none之中的一个，来设置mode参数，你可以启用webpack内置在相应环境下的优化。其默认值为production。

module。exports = {
    mode:'production',
}

浏览器兼容性（browser compatibility）

Webpack支持所有符合ES5标准的浏览器（不支持IE8以下版本）。webpack的import()和requre.ensure()需要Promise。如果你想要支持旧版本浏览器，在使用这些表达式之前，还需要提前加载polyfill

环境（environment）

webpack5运行于node.js10.13.0+的版本