【Webapck学习】

2023-12-20 16:59:03

在这里插入图片描述

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"
  }
}

文章来源:https://blog.csdn.net/m0_56542349/article/details/135107349
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。