webpack基础概念

webpack是一款项目打包构建工具,我们的项目没有经过打包上是不能运行在浏览器的,webpack可以打包成静态资源从而运行在浏览器中,需要注意的是原生的webpack只能打包js文件,其他的文件:css,sass,less等文件则需要配置loader加载器才能打包运行在浏览器被浏览器解析

webpack基础五大模块

entry(入口):
- 入口起点指示webapck应该使用哪个模块,来作为构建其内部依赖图的开始,进入入口起点之后,webpack会找出有哪些模块和库是入口起点依赖的,每个依赖项即被处理后,最后输出到称之为bundles的文件中,给大家看看我的配置

                     entry: "./src/main.js"

outout(输出):
- 配置output选项可以控制webpack如何向硬盘写入编译文件,即使存在多个入口,但只能存在一个出口;出口是一个对象,含有两个值:
- filename:用于输出文件的文件名
- path:目标输出的绝对路径

                 output: {
                    path: path.resolve(__dirname, "dist"),
                    filename: "static/js/main.js",
                    clean: true,
                  },

loader(加载器)
- loader用于对模块的源代码进行替换,loader可以使你在import或加模块时预处理文件,因此,loader类似于其他的构建工具中任务,并提供了处理前端构建步骤的强大方法.loader可以将文件从不同的语言转换为javascript,获奖内联图像转换为data url.loader甚至允许你在javascript模块中importcss文件

                    module: {
                        rules: [
                          {
                            test: /\.css$/,
                            use: ["style-loader", "css-loader"],
                          },
                          {
                            test: /\.(png|jpe?g|gif|webp|svg)$/,
                            type: "asset/resource",
                            parser: {
                              dataUrlCondition: {
                                maxSize: 10 * 1024,
                              },
                            },
                            generator: {
                              filename: "static/images/[hash:10][ext][query]",
                            },
                          },
                        ],
                      },

plugins(插件)
- 插件是webapck的支柱功能,webpack是自身也是构建,你在webpack配置中用到的相同插件系统之上,插件的目的在于解决loader无法解决的其他事

                    plugins: [你要的插件]

mode(模块)
- mode提供配置选项,告知webpack使用相应模式的内置优化,值为string类型
- 分为开发者模式:development;生产者模式:production

                 mode: "development"

webpack基础学习

webpack基础概念

webpack基础五大模块