webpack

最新推荐文章于 2024-11-10 15:07:03 发布

nknmn_

最新推荐文章于 2024-11-10 15:07:03 发布

阅读量121

点赞数

文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/qq_50829019/article/details/123282052

版权

一.前端工程化与webpack
    1.前端工程化
        模块化：js 的模块化、css 的模块化、资源的模块化
        组件化：复用现有的UI结构、样式、行为
    2.webpack 的基本使用
        1.什么是webpack
            webpack 是前端项目工程化的具体解决方案
            主要功能：
                前端模块化开发
                代码压缩混淆
                处理浏览器端JS的兼容性
                性能优化
        2.基本使用
            节点：
                dependencies 开发和上线部署都要用到          -S
                devdependencies 开发时用到           -D
            案例：创建列表隔行变色项目
                npm i jquery -S 等同于 npm i jquery --save
                -S 是 --save 的简写
                -S 是记录到dependencies 节点下

        3.在项目中安装webpack
            npm install webpack@5.42.1 webpack-cli@4.7.2 -D
            -D 是 --save-dev 的简写
            -D 是记录到devdependencies 节点下
        4.在项目中配置webpack
            （1）在项目根目录下，创建名为webpack.config.js 的webpack 配置文件，并初始化如下的基本配置
                // 使用Node.js 中的导出语法，向外导出一个webpack 的配置对象
                module.exports = {
                    mode: 'development'
                    // mode 用来指定构建模式，可选值有：development 和 production
                    // 开发阶段还是生产发布阶段
                    // 结论：开发时候一定要用development 追求的是打包速度而不是体积
                    // 发布上线的时候一定要用production 追求的是体积小而不是打包速度快
                }
            （2）在package.json 的scripts 节点下，新增dev 脚本如下：
                "scripts":{
                    "dev":"webpack"     // script 节点下的脚本，可以通过npm run 执行，例如：npm run dev
                }
            （3）在终端中运行npm run dev 命令，启动webpack 进行项目的打包构建
        5.webpack 的默认约定
            （1）默认的打包入口文件为src -> index.js
            （2）默认的输出文件路径为dist -> main.js
            注意：可以在webpack.config.js 中修改打包的默认约定
        6自定义打包的入口与出口：
            在webpack.config.js 配置文件中，通过entry 节点指定打包的入口，通过output 节点指定打包的出口
            如：
                const path = require('path'); // 导入node.js 中专门操作路径的模块
                module.exports = {
                    entry: path.join(__dirname,'./src/index.js'), // 打包入口文件的路径
                    output:{
                        path:path.join(__dirname,'./dist'), // 输出文件的存放路径
                        filename: 'main.js'     // 输出文件的名称
                    }
                    // __dirname 表示当前文件的存放路径
                }
    3.webpack 中的插件
        1.webpack-dev-server
            作用：每当修改了源代码，webpack 会自动进行项目的打包和创建
            安装：npm install webpack-dev-server -D
            配置：
                （1）"scripts": {
                        "dev": "webpack serve"   // script 节点下的脚本，可以通过npm run 执行，例如：npm run dev
                    }
                （2）再次运行 npm run dev 命令，重新进行项目的打包
                （3）在浏览器中访问 http:// localhost:8080 地址，查看自动打包效果
            注意：webpack-dev-server 会启动一个实时打包的http 服务器
            file 协议变成了http 协议
            自动监听源代码的修改，并自动刷新页面
        2.html-webpack-plugin
            作用：可以通过此插件自己定制index.html 页面的内容
                将指定的页面复制一份放到根目录里面去
                一打开浏览器就可以访问到指定的页面
            安装：npm install html-webpack-plugin@5.3.2 -D
            配置：
                // 1.导入HTML 插件，得到一个构造函数
                const HtmlPlugin = require('html-webpack-plugin');
                // 2.创建HTML 插件的实例对象
                const htmlPlugin = new HtmlPlugin({
                    template: './src/index.html', // 指定原文件的存放路径
                    filename: './index.html',   // 指定生成的文件的存放路径
                })
                module.exports = {
                    mode:'development',
                    plugins: [htmlPlugin],
                    // 3.通过plugins 节点，使htmlPlugin 插件生效
                }
        3.devServer 节点
            在webpack.config.js 配置文件中，可以通过devServer 节点对webpack-dev-server 插件进行配置
            devServer:{
                open: true,     //初次打包完成后，自动打开浏览器
                host: '127.0.0.1',     // 实时打包使用的主机地址
                port: '80'      // 实时打包所使用的端口号
            }
            注意：凡是修改了webpack.config.js 配置文件，或修改了package.json 配置文件，必须重启
            实时打包的服务器，否则最新的配置文件无法生效
    4.webpack 中的loader
        作用：
            在实际开发过程中，webpack 默认只能打包处理以.js 后缀名结尾的模块，其他非.js 后缀名结尾的模块，
            webpack 默认处理不了，需要调用loader 加载器才可以正常打包，否则会报错
        loader 加载器的作用：
            协助webpack 打包处理特定的文件模块
        如：
            css-loader 可以打包处理.css 相关的文件
            less-loader 可以打包处理.less 相关的文件
            babel-loader 可以打包处理webpack 无法处理的高级js语法
        安装：
            1.安装处理css 文件的loader
                （1）安装处理css 文件的loader
                    npm i style-loader@3.0.0 css-loader@5.2.6 -D
                （2）在webpack.config.js 的module -> rules 数组中
                    module:{ // 所有第三方文件模块的匹配规则
                        rules: [    // 文件后缀名的匹配规则
                            {test: /\.css$/,use: ['style-loader','css-loader']}
                        ]
                    }
                    // 其中test 表示匹配的文件类型，use表示对应要调用的loader
                    注意：
                        use 数组中指定的loader 顺序是固定的
                        多个loader 的调用顺序是：从后往前调用

            2.安装处理lcss 文件的loader
                （1）安装处理lcss 文件的loader
                    npm i less-loader@10.0.1 less@4.1.1 -D
                （2）在webpack.config.js 的module -> rules 数组中，添加loader 规则：
                    module:{    // 所有第三方文件模块的匹配规则
                        rules: {    // 文件后缀名的匹配规则
                            { test: /\.less$/, use: ['style-loader', 'css-loader','less-loader'] }
                        }
                    }

            3.安装打包处理样式表中与url 路径相关的文件
                （1）安装打包处理样式表中与url 路径相关的文件
                    npm i url-loader@4.1.1 file-loader@6.2.0 -D
                （2）在webpack.config.js 的module -> rules 数组中，添加loader 规则：
                    module:{ // 所有第三方文件模块的匹配规则
                        rules: {    // 文件后缀名的匹配规则
                            {test: /\.jpg|png|gif$/,use:'url-loader?limit=22229'}
                        }
                    }
                    注意：
                        ? 之后的是loader 参数项：
                        limit 用来指定图片的大小，单位是字节（byte）
                        只有<= limit 大小的图片，才会被转为base64 格式的图片

            4.对于webpack 都无法处理的JS 高级语法，需要安装babe-loader
                （1）npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
                （2）在webpack.config.js 的module -> rules 数组中，添加loader 规则：
                    module:{ // 所有第三方文件模块的匹配规则
                        rules: {    // 文件后缀名的匹配规则
                           {test: /\.js$/,use:'babel-loader',exclude:/node_modules/}
                        }
                    }
                    // 注意：必须使用exclude 指定排除项，因为node_modules 目录下的第三方包不需要被打包
                （3）在项目根目录下，创建名为babel.config.js 的配置文件，定义Babel 的配置项如下：
                    module.exports = {
                        // 声明babel 可用的插件
                        plugins: [['@babel/plugin-proposal-decorators',{legacy:true}]]
                    }
    5.打包发布
        在package.json 文件的scripts 节点下，新增build 命令：
        配置：
            "scirpts": {
                "dev": "webpack serve",     // 开发环境中，运行dev 命令
                // 生产时：serve 生成的文件是放到内存上
                "build": "webpack --mode production"    // 项目发布时，运行build 命令
                // 发布命令：npm run build
                // 发布时生成的文件是放到磁盘上
            }
            注意：
                --model 是一个参数项，用来指定webpack 的运行模式
                production 代表生产环境，会对打包生成文件进行代码压缩和性能优化
                通过 --model 指定的参数项，会覆盖webpack.config.js 中的model 选项

        在开发阶段：
            npm run dev
            serve 生成的文件在内存上
        在发布阶段：
            npm run build
            生成的文件在物理磁盘上

        自动清理dist 目录下的旧文件
            （1）安装：安装清理dist 目录的webpack 插件
                npm i clean-webpack-plugin@3.0.0 -D
            （2）按需导入插件，得到插件的构造函数之后，创建插件的实例对象
                const {CleanWebpackPlugin} = require('clean-webpack-plugin')
            （3）把创建的cleanPlugin 插件实例对象，挂载到plugins 节点中
                plugins: [htmlPlugin,new CleanWebpackPlugin()]   // 挂载插件
    6.Source Map
        Source Map 是一个信息文件，里面存储着位置信息
        Source Map 文件中存储着压缩混淆后的代码所对应的转换前的位置
        出错时会直接显示原始代码的位置，而不是转换后的代码的出错位置

        配制：
            在webpack.config.js中添加：
                module.exports = {
                    devtool: 'eval-source-map'
                }