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 es6语法转换 依赖插件

// webpack 4.x | babel-loader 8.x | babel 7.x 最新版本
npm i babel-loader @babel/core @babel/preset-env -D

// webpack 4.x | babel-loader 7.x | babel 6.x 版本
npm i babel-loader@7 babel-core babel-preset-env -D

webpack loader配置

// babel 语法转换
{
    test: /\.js$/,
    use: {
        loader: 'babel-loader',
        options: {
            // 用babel 把es6 转es5
            presets: [
                '@babel/preset-env'
            ]
        }
    }
}

总结

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

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


文章作者: 王小右
版权声明: 咳咳想白嫖文章?本文章著作权归作者所有,任何形式的转载都请注明出处。 https://www.charmcode.cn !
还能输入 100 字
  目录