webpack学习

前端工程化具体的解决方案
    webpack

    1 新建项目空白目录，文件夹地址栏cmd运行
    npm init -y,初始化包管理配置文件package.json
    2 新建src源代码目录
    3 src下新建index.html和index.js
    4 初始化页面基本的结构
    5 运行 npm i jquery -S ，安装jquey
    

    使用    ES6导入语法，导入jquery
    import $ from 'jquery'

    在项目中安装webpack
    npm install webpack@5.42.1 webpack-cli@4.7.2 -D

    dependencies 开发和上线都需要用的包
    devdependencies 开发用，上线不用

    -S 是 --save 的简写
    -D 是 --save-dev 的简写
    具体看用 -S / -D 查看npm.js中的使用说明

    在项目中配置webpack
     1 在项目根目录中，创建webpack.config.js的webpack配置文件，并初始化
         //node.js中的导出语法，向外导出一个webpack对象
         module.exports = {
             mode: 'development'   
         }
             //切换为production后会压缩main.js文件
             //mode用来指定构建模式，可选值有 development（开发用，打包速度快） 和 production（上线用，体积小）

     2 在package.json 的scripts节点下，新增 dev 脚本
         "scripts": {
             "dev": "webpack" 
         }
             //script节点下的脚本，可以通过 npm run 执行，

     3 在终端里运行 npm run dev ，启动webpack进行项目的打包构建
         html里src引用 生成的dist下的main.js文件，解决兼容性问题

     在webpack 4.x和 5.x版本中，默认约定：
         1 默认的打包入口文件为 src -> index.js
         2 默认的输出文件路径 dist -> main.js

     在webpack.config.js配置文件中，
         通过entry节点指定打包的入口，通过output节点指定打包的出口
         
         const path = require('path')   //导入node.js中专门操作路径的模块

         //__dirname 当前文件存放路径 
         module.exports = {
             entry: path.join(__dirname,'./src/index.js')   //打包入口文件的路径
             output: {
                 path: path.join(__dirname,'./dist')
                 //输出文件的存放路径
                 filename: 'bundle.js'
                 //输出文件的名称
             }
         }
         在终端里运行 npm run dev 即可生效

         webpack插件
             //只能处理以.js结尾的文件
             1 webpack-dev-server  会启动一个实时打包的http服务器

                 安装 npm install webpack-dev-server@3.11.2 -D
                 修改 package.json 的scripts节点下
                 "scripts": {
                     "dev": "webpack serve" 
                 }

                  再次运行 npm run dev ，重新进行打包

                 在浏览器中查看 http://localhost:8080/ 查看自动打包效果

             2 html-webpack-plugin
                 自动添加引用

                 安装 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],
                             //通过plugins节点，使htmlPlugin插件生效
                     }

                4 devServer
                    devServer: {
                        open: true,   //首次打包成功后自动打开浏览器
                        host: '127.0.0.1',  //指定运行的主机地址
                        port: 80      //自己设置端口号
                    }

    loader  //加载器  打包处理css文件
        1 安装 npm i style-loader@3.0.0 css-loader@5.2.6 -D
        2 在webpack.config.js的module -> rules 数组中，添加loader规则：
                module: {     //所有第三方文件模块的匹配规则
                    rules: [    //文件后缀名的匹配规则
                        { test: /\.css$/,
                        use: ['style-loader','css-loader']}
                    ]
                    //test表示匹配的文件类型，use表示对应要调用的loader
                    //use 数组中指定的loader 顺序是固定的
                    //多个loader的调用顺序是：从后往前调用
                }

        打包处理less文件
            1 安装 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']}
                    ]
                    //test表示匹配的文件类型，use表示对应要调用的loader
                    //use 数组中指定的loader 顺序是固定的
                    //多个loader的调用顺序是：从后往前调用
                }

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

        打包处理js文件中的高级语法，应用babel-loader解决
            //1. 定义了名为info的装饰器
            function info(target) {
                //2. 为目标添加静态属性info
                target.info = 'Person info'
            }

            //3. 为Person类应用info装饰器
            @info
            class Person {}

            //4. 打印Person的静态属性info
            console.log(Person.info);

            安装
             npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

            在webpack.config.js的module -> rules 数组中，添加loader规则：
            //注意：必须使用exclude 指定排除项，因为node_modules 目录下的第三方包不需要被打包
            { test: /\.js$/，use: 'babel-loader',exclude: /node_modules/}

            配置 babel-loader
                在项目根目录下，创建名为babel.config.js 的配置文件，定义babel的配置项如下：

                module.exports = {
                    //声明babel可用的插件
                    plugins:[['@babel/plugin-proposal-decorators',{ legacy:true }]]
                }

        配置 webpack 的打包发布
            在package.json 文件的 scripts 节点下，新增 build 命令如下：
            "build": "webpack --mode production"  //项目发布时，运行build命令
            //--model是一个参数项，用来指定webpack的运行模式，production代表生产环境，会对打包生成的文件进行代码压缩和性能优化
            //注意：通过 --model 指定的参数项，会覆盖 webpack.config.js 中的model选项

        自动清理 dist 文件
             clean-webpack-plugin插件  在npm.js中搜索下载使用

    source map  信息文件，存贮着位置信息（代码行号位置）
        开发环境默认生成的source map，记录的是生成后代码的位置，会导致运行时报错的行数与源代码的行数不一致的问题

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

        在生产环境下，如果省略了 devtool 选项，则最终生成的文件中不包含 source map，防止源代码通过source map 暴露给别有所图的人

        只定位行号不暴露源码
            将 devtool 的值改为 nosources-source-map

        最终结论：
        //开发环境用，方便定位错误行号
            devtool: 'eval-source-map',

        //生产环境用，安全不暴露源码
        devtool: 'nosources-source-map'

    建议大家使用 @ 表示src 源代码目录，从外往里查找；不要使用 ../ 从里往外查找
        需要在webpack.config.js添加配置
    module.exports = {
        resolve: {
                alias: {
            //告诉webpack，程序员写的代码中， @ 符号表示src这一层目录
            '@':path.join(__dirname,'./src/')
        }
    }
            }