webpack01

news2025/1/4 6:29:47

webpack是一个前端工程化的打包工具

webpack在打包的时候，会形成一个依赖关系图，关联要打包的模块，，，不同的模块通过不同的loader去解析，，，比如解析css使用 css-loader,解析js使用babel…

webpack的安装

webpack-cli ：是一个与webpack配套使用的工具，，提供了在命令行运行和配置webpack的能力，，比如可以配置webpack后面跟的参数 webpack --config webpack.config.js , webpack-cli负责解析命令行参数并将其传递给webpack核心。。。

所以在安装的时候也顺带将 webpack-cli带上，，当然 webpack-cli不是必须的

全局安装。npm i webpack webpack-cli -g
局部安全npm i webpack webpack-cli -D

直接运行webpack，，他会去当前目录下找src文件夹下面的index.js 作为入口文件，进行打包
直接运行webpack，，使用的是全局的webpack，，，，如果想使用项目里面安装的webpack，，
可以使用 npx webpack 或者在package.json中的 script 中写 webpack, package.json 中执行的脚本会优先使用项目内的webpack，，而不会使用全局的webpack

npx： npm 的一个命令行工具，用于运行 Node.js 包。它的主要功能是让你能够不安装全局依赖的情况下，直接运行一个包。它会自动查找并执行本地或远程的包。

loader的使用：

直接在import的时候使用 loader。比如import "css-loader!../css/index.css"
通过启动脚本配置（已经废弃了）
配置文件配置（推荐）

css-loader : 解析css
style-loader: 创建一个style标签，将css。引入进去
less-loader : 这个loader回去调用less命令行。去将 less文件转换成普通的css，，使用这个loader必须先安装npm i less, 这个less-loader只是去调用这个命令，，而真正将less变成css的是 less这个包自己

webpack配置

出口文件，不能是相对路径，必须是绝对路径，，，path.resolve(__dirname)获取当前文件所在路径
path.resolve(__dirname,"./build)
loader的顺序：后面的loader先使用，，style-loader 需要写在 css-loader前面，，


// commonJS 的方式读取的，，， commonJS的方式导出
const path = require("path");
module.exports = {
    entry:"./src/main.js",
    output:{
        filename:"bundle.js", // 输出的文件名字
        path: path.resolve(__dirname,"./build")  // 出口只能是绝对路径    path.resolve(__dirname) : 当前文件的绝对路径
    },
    module:{
        rules:[ // 配置loader
            { // Rule对象
                test:/\.css$/,// 匹配资源  ===> 匹配到的资源，，用下面的loader处理  ===> 正则表达式
                use:[// 先用后面的loader处理，，再用前面的loader
                    {
                        loader: "style-loader"
                    },
                    {
                        loader:"css-loader", // 设置loader
                        options:{}  // 这里配置的值会被传入loader中
                    },

                ] , // [useEntry] ===> useEntry是一个对象
                /**
                 * use:["css-loader"] 最终会被转换为 ===》  use:[{loader:"css-loader}]
                 */

                // loader:"css-loader"  ===> 只有一个loader可以这样写，，也是  【useEntry】 的简写

                /**
                 * less的代码  ===》  css
                 *   less-loader ： 只不过是一个处理而已，而对less代码作编译的，是一个独立的工具，跟webpack没有任何关系
                 *
                 *   lessc   ===>  对less文件进行编译，转成css
                 *
                 *   less-loader 也是使用 less这个工具，，将less文件转成css
                 *
                 *
                 */

            }
            ,
            {
                test: /.less$/,
                use:[
                    "style-loader",
                    "css-loader",
                    {
                        loader: "less-loader" // 会自动进行less的使用
                    }
                ]
            }
        ]
    }


}

browserlist

browserlist : 就是展示这些浏览器市场占用的工具，，把这些共享的信息，，给 autoprefixer :不同浏览器给css加的前缀不同，， babel :解释为低级js，，， postcss-preset-env等转换工具。。。让他们共享这些浏览器，并处理这些浏览器的兼容问题

js和css，在不同的浏览器中，兼容性不同，，随着前端工程化的发展，，这些处理各个浏览器兼容的问题，不用人为去处理，，而是通过打包，，去适配各个浏览器的兼容，，，
npx browserslist ">1%,last 2 version,not dead"
逗号, 表示并集。and 表示交集，not表示取反，，， >1%表示在caniuse.com根据这个网站统计的浏览器使用占比大于百分之一的浏览器。last 2 version ：表示每一种浏览器最近的两个版本。。。no dead:表示一年内没有停止维护的浏览器，，
npx browserlist. 会例出这些浏览器，，webpack在打包的时候进行兼容处理

在package.json中可以配置默认的browserlist：

{
  "name": "webpack01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config wk.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^7.1.2",
    "less": "^4.2.1",
    "less-loader": "^12.2.0",
    "style-loader": "^4.0.0",
    "webpack": "^5.97.1",
    "webpack-cli": "^6.0.1"
  },
  "browserslist": [
    ">1%",
    "last 2 version",
    "not dead"
  ]
}