【Webapck学习】

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有两个属性

1. test 属性，识别出哪些文件会被转换。
2. 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 生态系统提供更多能力。用户现在可以更加灵活地引入细粒度逻辑，例如：压缩、打包、语言转译（或编译）和 更多其他特性。

5、webpack.config.js文件

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist'),// 输出文件夹必须定义为绝对路径
        clean: true, // 打包前清理dist文件夹
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'app.html', // 生成的文件名
            template: path.resolve(__dirname, './index.html'), // 源文件的绝对路径
            inject: 'body' // 设置所有资源文件注入模板的位置。可以设置的值 true|'head'|'body'|false，默认值为 true
        })
    ],
    mode: 'development', // 开发模式,
    devtool: 'inline-source-map', // 开发模式下追踪代码，生成的sourcemap文件，会内嵌在bundle.js中
    devServer: {
        static: './dist'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {loader: 'style-loader'},
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                        },
                    },
                ],
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader', 'css-loader','less-loader'
                ]
            },
            {
                test: /\.(png|jpg|gif)$/, // 把图片处理为url的数据
                // 如果loader只有一个，只传递一个字符串即可
                use : 'url-loader?limit=4734'
            }
        ],
    }
}

6、package.json文件

{
  "name": "01_html_js",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npx webpack",
    "detail": "npx webpack --stats detailed",
    "dev": "npx webpack server --open"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4"
  },
  "devDependencies": {
    "css-loader": "^6.8.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.6.0",
    "less-loader": "^11.1.3",
    "sass-loader": "^13.3.2",
    "style-loader": "^3.3.3",
    "url-loader": "^4.1.1",
    "webpack-dev-server": "^4.15.1"
  }
}