1、webpack是什么

Webpack是一个前端模块化方案，更侧重于模块打包。我们可以把开发中的所有资源(图片，js,css,字体等)
都看成模块，通过loader和plugins对资源进行处理，打包成符合生产环境部署的前端资源

初始化项目，得到package.json文件
npm init -y
安装webpack, webpack-cli
npm install webpack webpack-cli
使用webspack打包
npx webpack
查看打包细节
npx webpack --stats detailed
查看webpack终端命令有哪些
npx webpack --help

命令行不方便，通过配置文件来配置 webpack.config.js，执行npx webpack就可以

const path = require('path')
module.exports = {
    entry: './src/index.js', //打包入口
    output: {
        filename: 'bundle.js', // 打包后的文件名
        path: path.resolve(__dirname, './dist'),// 输出文件夹必须定义为绝对路径
        clean: true, // 打包前清理dist文件夹
    },
    mode: 'none'
}

2、插件|Plugins

插件是webpack的核心功能。可以用于执行一些特定的任务，包括：打包优化，资源管理，注入环境变量等。
webpack自身也是构建于你在webpack配置中用到的相同的插件协同。可以完成Loader无法完成的其它任务。

01、使用HtmlWebpackPlugin

作用：一个服务于bundles的、用于简化HTML文件生成的插件
安装： yarn add --dev html-webpck-plugin

配置：

plugins: [
    new htmlWebpackPlugin({
        filename: 'app.html', // 生成的文件名
        template: path.resolve(__dirname, './index.html'), // 源文件的绝对路径
        inject: 'body' // 设置所有资源文件注入模板的位置。可以设置的值 true|'head'|'body'|false，默认值为 true
    })
]

3、搭建开发环境

设置mode： mode: 'development', // 开发模式
使用sourcemap： devtool: 'inline-source-map', // 开发模式下追踪代码，生成的sourcemap文件，会内嵌在bundle.js中

当 webpack 打包源代码时，可能会很难追踪到 error(错误) 和 warning(警告) 在源代
码中的原始位置。例如，如果将三个源文件（ a.js , b.js 和 c.js ）打包到一个
bundle（ bundle.js ）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会直
接指向到 bundle.js 。你可能需要准确地知道错误来自于哪个源文件，所以这种提
示这通常不会提供太多帮助。
为了更容易地追踪 error 和 warning，JavaScript 提供了 source maps 功能，可以
将编译后的代码映射回原始源代码。如果一个错误来自于 b.js ，source map 就会
明确的告诉你。
使用watch mode(观察者模式)： npx webpack --watch

在 webpack 启动时添加 “watch” 参数。如果其中一个文件被更新，代码将
被重新编译，所以你不必再去手动运行整个构建
使用webapck-dev-server：
- 安装： npm install webpack-dev-server -D
- 配置： devServer: { static: './dist' }
  
  以上配置告知 webpack-dev-server ，将 dist 目录下的文件作为 web 服务的根目
  录。
- 运行： npx webpack server --open
  
  webpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文
  件保留在内存中，然后将它们 serve 到 server 中，就好像它们是挂载在 server
  根路径上的真实文件一样。

4、loader

1、loader是什么？

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用loader进行转换。

Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。

在Webpack中，Loader是一种用于转换不同类型文件的中间件。它们的主要任务是将源文件转换为模块，以便将它们添加到Webpack的依赖图中。
Loader将源文件作为输入，对其进行处理，然后输出转换后的文件。这些处理可以包括编译、压缩、转译、转换和其他自定义操作。最终，这些文件将被合并到Webpack的输出中。

2、安装loader

npm install babel-loader style-loader css-loader file-loader --save-dev

3、配置loader

loader有两个属性

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

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

module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                { loader: 'style-loader' },
                {
                    loader: 'css-loader',
                    options: {
                        modules: true,
                    },
                },
                { loader: 'sass-loader' },
            ],
        },
    ]
}

loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)。在下面的示例中，从 sass-loader 开始执行，然后继续执行 css-loader，最后以 style-loader 为结束。

4、loader特性

loader 支持链式调用。链中的每个 loader 会将转换应用在已处理过的资源上。一组链式的 loader 将按照相反的顺序执行。链中的第一个 loader 将其结果（也就是应用过转换后的资源）传递给下一个 loader，依此类推。最后，链中的最后一个 loader，返回 webpack 所期望的 JavaScript。
loader 可以是同步的，也可以是异步的。
loader 运行在 Node.js 中，并且能够执行任何操作。
loader 可以通过 options 对象配置（仍然支持使用 query 参数来设置选项，但是这种方式已被废弃）。
除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader，还可以在 module.rules 中使用 loader 字段直接引用一个模块。
插件(plugin)可以为loader带来更多特性。
loader 能够产生额外的任意文件。

可以通过 loader 的预处理函数，为 JavaScript 生态系统提供更多能力。用户现在可以更加灵活地引入细粒度逻辑，例如：压缩、打包、语言转译（或编译）和更多其他特性。