再重新学习webpack

1、查看NPM上某依赖包的所有版本

npm info xxx versions

例如：
npm info webpack versions
npm info webpack-cli versions

2、全局和本地安装执行依赖包命令的区别

全局安装：直接输入命令就可以，类似环境变量里的命令一样
本地安装：无法执行执行命令，有一下2种方法

1、./node_modules/.bin/xxxxx
2、npx xxxxx

3、打包 html资源

必须使用 html-webpack-plugin 插件

1、安装
npm i -D html-webpack-plugin

2、在配置文件中引入
const HtmlWebpackPlugin = require('html-webpack-plugin');

3、在配置文件中使用
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

4、打包 css/less/scss资源

css 使用插件：style-loader css-loader
less 使用插件：less-loader
sass/scss 使用插件：sass-loader

1、安装
npm i -D style-loader css-loader less-loader sass-loader

2、使用
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.(sass|scss)$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    }
}

注意：
1、使用style-loader，css并不会打包成css文件，而是打包进js文件中

5、打包 图片资源

• 打包css文件中的背景图片（background-url）

需要使用 url-loader file-loader 插件

1、安装
npm i -D url-loader file-loader

2、使用
module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif)$/,
                loader: 'url-loader',    
                options: {
                    limit: 8 * 1024,
                    outputPath: 'imgs'
                }
            }
        ]
    }
}

注意：
1、当只使用一个loader时，可以直接使用 loader: 'url-loader'
2、limit 用于限制：图片小于8KB，就会转化成Base64格式，否则，就用URL引入图片。优点减少请求数量，缺点图片体积更大

• 打包html文件中 <img />图片

需要使用 img-loader 插件，用于解析html文件中img标签图片地址，并把图片地址交给 url-loader 处理

1、安装
npm i -D html-loader

2、使用
module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif)$/,
                loader: 'url-loader',    
                options: {
                    limit: 8 * 1024,
                    esModule: false,
                    name: '[hash:10].[ext]',
                    outputPath: 'imgs'
                }
                
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            }
        ]
    }
}

• 打包html文件中，style="background-image:url(./sss.png)"内联背景图

暂时没有好的解决方案，换个思维考虑，可能主要是书写规范问题，应该把css与html分开，不要使用内联样式

6、打包 其他资源

所谓其他资源，指的是不需要webpack特别处理、优化，只要原封不动输出出去

需要使用 file-loader

1、安装loader
npm i -D file-loader

2、使用
module.exports = {
    module: {
        rules: [
            {
                exclude: /\.(html|js|css|less|scss|sass|png|gif|jpe?g)$/,
                loader: 'file-loader',    
                options: {
                    name: '[hash:10].[ext]',
                    outputPath: 'assets'
                }
            }
        ]
    }
}

7、Source-map

用于开发环境下的调试

是一种用于调试构建后代码的技术，构建后的代码能映射跟踪到源码

1、配置
module.exports = {
    devtool: "source-map"
}

类别分为 内联 和 外联
1、内联构建速度更快,但生成代码文件也变大
2、外联生成.map文件，内联没有

可取值：
1、source-map         外联
精准错误代码信息 和 显示源代码错误位置
2、inline-source-map  内联
精准错误代码信息 和 显示源代码错误位置
3、hidden-source-map  外联
错误代码错误原因 但没有错误位置
4、eval-source-map    内联，每个模块都生成对应sorce-map
精准错误代码信息 和 显示源代码错误位置
5、nosources-source-map 外部
6、cheap-source-map   外部
7、cheap-module-source-map 外部

开发环境推荐：
eval-source-map 或 eval-cheap-module-source-map

生产环境推荐:
(不能使用内联方式：因为文件体积大)
要不要隐藏？要不要调试更好？
隐藏：
hidden-source-map 或 nosources-source-map

调试更好
source-map

8、devServer 开发服务器

为何要使用 devServer
与普通服务器相比，提高开发效率和体验，devServer 可以做：自动构建打包，自动打开浏览器（可选），自动刷新浏览器

1、安装插件
npm i webpack-dev-server -D

2、配置
const {resolve} = require("path")

module.exports = {
    // 开发服务器
    devServer: {
        contentBase: resolve(__dirname, 'dist'),
        watchContentBase: true,  // 监听contentBase项项变化
        watchOptions: {
            ignored: /node_modules/
        },
        compress: true,    // 启动gzip压缩
        port: 8080,        // 端口
        open: true,        // 自动打开浏览器
        host: 'localhost', // 域名 
        hot: true,         // 开启HMR功能
        overlay: true,     // 如果出错了，不要全屏提示
        clientLogLevel: 'none',  // 不显示启动服务器日志信息
        // 服务器代理，解决跨域问题
        proxy:{
            '/api':{
                // 一旦服务器（8080）接收到/api/xxx请求，会把请求转发到另外一个服务器（3000）
                target: 'http://localhost:3000'，
                // 路径重写
                pathRewrite: {
                    // /api/xxx => /xxx
                    '^/api': ''
                }
            }
        }
    }
}

3、启动devServer命令
webpack 4.X : npx webpack-dev-server
webpack 5.X : npx webpack serve

9、运行项目的指令

1、使用webpack对项目进行打包输出
npx webpack

2、使用webpack-dev-server对项目进行打包，并不会输出，只是启动
npx webpack-dev-server

10、提取CSS成单独文件

为何要提取css成单独文件？
1、降低js文件大小
2、解决js动态插入css闪动问题

用到的插件 mini-css-extract-plugin

1、安装
npm i mini-css-extract-plugin -D

2、使用
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    // 创建style标签，将样式放入
                    // 'style-loader', 
                    // 这个loader取代style-loader。作用：提取js中的css成单独文件
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.(sass|scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            // 对输出的css文件进行重命名
            filename: 'static/css/[name].[chunkhash:10].css'
        })
    ]
}

11、CSS兼容性处理

所谓css兼容性处理，其实包括
1、加 目标浏览器 专属前缀
2、高版本CSS 转换成 低版本CSS
3、解决全局CSS命名冲突问题

前置条件是确定目标浏览器

使用 postcss 库，这是个独立的库，里面还有许多插件可以使用

1、安装
npm i -D postcss-loader postcss-preset-env

postcss-loader：连接PostCSS和Webpack的桥梁
postcss-preset-env：将最新的CSS语法转换为目标环境的浏览器能够理解的CSS语法

2、使用
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: "postcss-loader",
                        options: {
                            ident: "postcss",
                            plugins: () => [
                                require("postcss-preset-env")()
                            ]
                        }
                    }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                     {
                        loader: "postcss-loader",
                        options: {
                            ident: "postcss",
                            plugins: () => [
                                require("postcss-preset-env")()
                            ]
                        }
                    },
                    'less-loader'
                ]
            },
            {
                test: /\.(sass|scss)$/,
                use: [
                    'style-loader',
                    'css-loader',
                     {
                        loader: "postcss-loader",
                        options: {
                            ident: "postcss",
                            plugins: () => [
                                require("postcss-preset-env")()
                            ]
                        }
                    },
                    'sass-loader'
                ]
            }
        ]
    }
}

注意：
1、你会发现有 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件)，指定了项目所需运行的 目标浏览器范围

// 默认使用production配置
// package.json
{
    "browserslist": {
        "development": [
            "last 2 versions"
        ],
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ]
    }
}

// .browserslistrc
> 1%
last 2 versions

12、CSS压缩

使用插件 optimize-css-assets-webpack-plugin

1、安装
npm i -D optimize-css-assets-webpack-plugin

2、使用
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new OptimizeCssAssetsWebpackPlugin()
    ]
}

13、JS与HTML压缩

JS压缩很简单，就是把 mode 改为 production 就会打包时自动压缩JS

html压缩是不需要做兼容性处理的，压缩配置如下：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            minify: {
                // 移除空格
                collapseWhitespace: true,
                // 移除注释
                removeComments: true
            }
        })
    ]
}

注意：
新版webpack 5.x无需以上配置，只要 mode 设为 production，html就会压缩

14、集成eslint

eslint作用：
1、确保代码风格一致
2、代码语法检测

使用到的插件：eslint-loader eslint
eslint使用代码风格：airbnb
用到eslint插件：eslint-config-airbnb-base eslint-plugin-import

1、安装
npm i -D eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import

2、配置
module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'eslint-loader',
                options: {
                    fix: true
                }
            }
        ]
    }
}

3、配置eslint文件 （package.json或.eslintrc.js）
"extends": "airbnb-base"，
env: {
    node: true
}

注意：
1、如果某行源码不需要eslint来检测，可以在这行代码上面加一句注释：// eslint-disable-next-line
2、自己写的代码才需要eslint检测，依赖的第三方库不需要使用eslint,需要排除

15、集成babel（JS兼容处理）

由于当代浏览器还没完全支持es6或者更高级JS语法，所以需要把高级语法转换成低级的ES5语法，使用到的插件是 babel

1、安装
npm i -D babel-loader @babel/core @babel/preset-env

2、配置
module.exports = {
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    // 预设：指示babel要做怎样的兼容性处理
                    presets:[
                        '@babel/preset-env'
                    ]
                }
            }
        ]
    }
}

16、生产环境优化

去除项目里死代码

前置工作：
1、必须使用ES6模块化规范
2、mode设置为production

注意：html代码默认在production模式下，自动去除注释的代码，所以这里讲的是去除JS和CSS的死代码

• 去除没用JS代码

webpack通过内置tree-shaking(摇树算法)去除没用的JS代码

• 去除没用CSS代码

使用 purgecss-webpack-plugin 插件，原理在打包前进行样式处理

1、安装
npm i purgecss-webpack-plugin -D

2、配置
const {join} = require('path');
const Glob = require('glob');
const PATHS = {src: join(__dirname, 'src')};
const PurgecssWebpackPlugin = require('purgecss-webpack-plugin');

module.exports = {
    plugins: [
        new PurgecssWebpackPlugin({
            paths: Glob.sync(`${PATHS.src}/**/*`, {nodir: true})
        })
    ]
}