webpack入门二 使用核心概念

WebPack使用核心概念

参考文档

webpack v4.44.1中文文档 https://www.webpackjs.com/concepts/
webpack v5.0.0-beta.24 https://webpack.js.org/concepts/

四个核心组成

• 入口 Entry
• 输出 Output
• 加载解释 Loaders
• 插件 Plugins

加上

- 模式 Mode
- 浏览器兼容性Browser Compatibility

示例

目录结构

src
  |- index.js       // 入口文件 引入了a.js a.less index.css
  |- a.js           // 示例js文件
  |- a.less         // less文件
  |- index.css      // 基础css文件
  |- index.html     // 模版文件

webpack打包文件格式webpack.config.js

/**
 *
 * webpack 简单的配置
 * */
const path = require('path');  // 路径操作相关包
const HtmlWebPackPlugin = require('html-webpack-plugin');  // 自动创建一个html文件引入打包好的js文件呢

module.exports = {
    devServer: {
        port: 8810, // 端口
        progress: true, // 打包进度条
        contentBase: './dist', // 以这这个文件夹为基础路径
        compress: true // 启动压缩
    },
    mode: 'development',  // 模式默认两种 production 和 development
    entry: './src/index.js',  // 入口文件
    output: {
        filename: 'main.js',   // 输出文件名 main.[hash:5].js :5只显示5位 也可以加hash戳 如生成main.c60ec6fba5da66bd8ce3.js 防止浏览器缓存
        path: path.resolve(__dirname, 'dist'),  // 输出路径
    },
    // 数组文件 存放所有的webpack插件
    plugins: [
        // 初始化模版html文件
        new HtmlWebPackPlugin({
            template: './src/index.html',  // 模版文件目录
            filename: 'index.html',     //默认index.html  生成好的文件名(会自动引入打包好的js文件)
            // 压缩参数配置
            minify: {
                removeAttributeQuotes: true, // 移除引号
                // collapseWhitespace: true,   // 压缩成一行
            },
            hash: true,  // 打包好的文件带hash戳 如 src=main.js?c60ec6fba5da66bd8ce3
        })
    ],
    // 模块文件
    module: {
        // 打包的loader
        rules: [ // 规则， 可以有多个
            // 正则匹配文件 css结尾的文件
            // css-loader 可以兼容 @import "a.css";这种语法
            // loader特点希望功能单一， 多个loader需要[]， 单个可以''使用
            // loader加载顺序， 默认从右往左 还可以传入参数 npm i css-loader style-loader -D
            {
                test: /.css$/,
                use: [
                    {
                        loader: 'style-loader', // style-loader 记载到html
                        // 写成对象形式就可以插入参数
                        options: {
                            // v4.44.1 中文文档有问题？报错 https://www.webpackjs.com/loaders/style-loader/#insertat
                            // insertAt: 'top',
                            // 参考英文文档 https://webpack.js.org/loaders/style-loader/#insert
                            insert: function insertAtTop(element) {
                                let parent = document.querySelector('head');
                                let lastInsertedElement = window._lastElementInsertedByStyleLoader;
                                if (!lastInsertedElement) {
                                    parent.insertBefore(element, parent.firstChild);
                                } else if (lastInsertedElement.nextSibling) {
                                    parent.insertBefore(element, lastInsertedElement.nextSibling);
                                } else {
                                    parent.appendChild(element);
                                }
                                window._lastElementInsertedByStyleLoader = element;
                            },
                        }
                    },
                    // 处理引入问题 @import url()
                    'css-loader'
                ]
            },
            {
                // less打包loader
                test: /.less$/,
                use: [
                    // 顺序不能颠倒 默认从左到右
                    'style-loader',     // 处理css样式
                    'css-loader',       // 处理引入问题 @import url(),
                    'less-loader',      // 处理less
                ]
            },
        ]
    }
};

由于使用了部分插件和loader，所以需要安装依赖

html-webpack-plugin         // 初始化html插件
css-loader                  // 处理css引入等loader
less                        // 支持less语法插件
less-loader                 // 处理less文件打包loader
style-loader                // 处理css样式打包loader

总结

webpack 官方文档，好多人在吐槽，我开始不以为意，知道我碰见了第一个坑loader中的insert
比起Python的FastAPI文档是真的，差了好多。

基础使用差不多就是这些内容，后面就是不用的插件用法学习，用到到时候看文档(希望文档不要太坑)