webpack的几个核心概念

什么是webpack

webpack本质上是一个打包工具，它会根据代码的内容解析模块依赖，帮助我们把多个模块的代码打包。下面是webpack官网给的一个说明图。

如上图，webpack 会把项目中使用到的多个代码模块（可以是不同文件类型），打包构建成项目运行仅需要的几个静态文件（如.js、.css等）。

webpack 安装

webpack支持使用npm或者yarn方式进行安装，当然也可以作为一个全局的命令来使用。

npm install webpack webpack-cli -g 

# 或者yarn global add webpack webpack-cli

webpack的几个核心概念

webpack的配置文件通常为webpack.config.js，放置于项目的根目录中。此外，也能够使用webpack --config来指定使用的配置文件。
一个简单的配置文件如下：

// webpack.config.js
const path = requore('path')

module.exports = {
    entry: './src/index.js',  // 指定入口文件
    output: {  // 指定输出文件
        path: path.resolve(__dirname, '/dist'),
        filename: 'bundle.js'
    },
    mode: 'development',  // 指定构建环境
    module: {
        rules: []  // 配置loaders
    }, 
    plugins: []  // 配置plugins
}

entry

entry 用于指定打包入口。目前入口文件只支持js，其它的如html和css都不支持。

webpack会把js、css、图片等等当成一个个模块，各模块间会存在一系列的依赖关系，在webpack里面，会根据entry指定的文件，找到依赖，entry文件的依赖也可能会以来其他模块，这样就会生成一棵依赖树。webpack会遍历这课依赖树，遍历完了才会生成打包资源。

entry可以指定单入口与多入口。

单入口

单入口适用于单页应用，其使用一个字符串来给定入口文件的地址，如下：

entry: './src/index.js'

多入口

多入口适用于多页应用，其使用一个对象来给定入口文件的地址，该对象为键值对的形式，键为入口模块的名字，值为文件地址如下：

entry: {
    app: './src/app.js',
    search: './src/search.js'
    // ...
}

output

output 指定编译后的文件如何输出到磁盘，注意，即使可以存在多个entry起点，但只能指定一个output配置。

output的值必须为一个对象，并且包含以下两个属性：

1. filename 用于输出文件的文件名。
2. path 用于指定目标输出文件的绝对路径。

示例如下：

output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
}
// 此配置将生成一个单独的 bundle.js 文件输出到项目的 /dist 目录中。

以上示例是针对单入口的配置。如果是多入口，可以使用占位符[name]来确保每个文件具有唯一的名称。

entry: {
    app: './src/app.js',
    search: './src/search.js'
},
output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
}
// 此配置将生成两个文件 ./dist/app.js, ./dist/search.js。

loaders

webpack原生只支持js和json，通过loaders去支持其他文件类型，如css，并把他们转化为有效模块，并可以添加到依赖图中。

loader本身是一个函数，接受源文件为参数，返回转换后的结果。

常见的loader

名称	用处
babel-loader	转换ES6/ES7等JS新特性语法
css-loader	支持.css的解析和加载
less-loader	将less转换为css
ts-loader	将TS转换为JS

用法

module: {
    rules: [ // 将需要的loader放在module对象的rules数组中
         'bable-loader', // 可以直接使用loader名称
        { test: /\.txt$/, use: 'raw-loader' }, // test - 指定匹配规则，use - 指定使用的loader名称
    ]
}

plugins

plugin用于bundle文件的优化，资源管理和环境变量的引入，作用于整个构建过程

常见的plugin

名称	用处
cleanWebpackPlugin	清理构建目录
miniCssExtractPlugin	将CSS从bundle里提取成一个独立的css文件
htmlWebpackPlugin	创建html文件
uglifyjsWebpackPlugin	压缩js

用法

plugins: [ // 将使用的plugin放到plugins数组中
    new HtmlWebpackPlugin({ template: './src/index.html' })
]

mode

mode用于指定当前构建环境，可取值为：development / production / none

设置mode可以使用webpack的一些内置函数。

选项	描述
development	设置process.env.NODE_ENV的值为development，开启NamedChunksPlugin和NamedModulesPlugin
production	设置process.env.NODE_ENV的值为production，开启FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorPlugin，OccurrenceOrderPlugin，SideEffectsFlagPlugin，TerserPlugin
none	不开启任何优化选项

关于path.resolve([…paths])

将路径或路径片段处理成绝对路径。

path 从右到左依次处理，直到构造出绝对路径。 例如，指定的路径片段是：/foo、/bar、baz，则调用 path.resolve('/foo', '/bar', 'baz') 会返回 /bar/baz。
如果处理完全部 path 片段后还未产生绝对路径，则加上当前工作目录。
生成的路径会进行规范化，并且删除末尾的斜杠，除非路径是根目录。
空字符串的 path 片段会被忽略。
如果没有指定 path，则返回当前工作目录的绝对路径。
Node.js 中，__dirname总是指向被执行 js 文件的绝对路径，所以当在 /d1/d2/myscript.js 文件中写了 __dirname， 它的值就是 /d1/d2 。