Webpack部分loader配置解析

最新推荐文章于 2024-01-12 14:41:46 发布

小鞠由依

最新推荐文章于 2024-01-12 14:41:46 发布

阅读量390

点赞数

文章标签： javascript npm webpack

本文链接：https://blog.youkuaiyun.com/qq_37431622/article/details/108093388

版权

本文详细介绍了Webpack中各种加载器的配置与使用，包括url-loader、file-loader、mini-css-extract-plugin-loader、postcss-loader及eslint-loader。针对常见问题如css文件url路径错误、Promise转换及eslint-loader使用进行了详细解答。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

loader配置详解

相关链接: loaders

url-loader

{
	loader: 'url-loader',
    options: {
        limit: 64 * 1024 // 将文件大小低于指定值的图片，转为base64字符串
        mimetype: 'image/png' //把其他后缀名的图片文件，统一转为同一种格式的base64编码
        outputPath: 'img' // 文件输出路径
        publicPath: 'img' // 拼接路径，loader导出的文件会以publicPath + name显示在html中
        name: "[name].[hash:6].[ext]" // 文件名,可以使用webpack占位符,
        esModule: false //是否开启es6模块化规范
    }
}

file-loader

{
	loader: 'file-loader',
	options: {
		name: "[name].[hash:6].[ext]",  // 文件名
		context: "webpack.config.js",  // 配置自定义文件 context
		publicPath: "file",  // 为你的文件配置自定义 public 发布目录
		outputPath: "file",  // 为你的文件配置自定义 output 输出目录
		useRelativePath: false, // 如果你希望为每个文件生成一个相对 url 的 context 时，应该将其设置为 true
		emitFile: true  //默认情况下会生成文件，可以通过将此项设置为 false 来禁止（例如，使用了服务端的 packages）
	}
}

mini-css-extract-plugin-loader

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
{
    loader: MiniCssExtractPlugin.loader,
    options: {
        publicPath: "css", // 为你的文件配置自定义 public 发布目录
        hmr: true // 是否开启模块热替换(Hot Module Replacement)
    }
},

plugins: [
    new MiniCssExtractPlugin({
        filename: 'css/[name].[hash:6].css', // 文件名
        chunkFilename: 'css/[id].[hash:6].css',
    })
]

存在的问题:

打包后css文件中url引用路径不正确，修改publicPath: "…/"也不生效

已解决，当file-loader或者其他前置处理的loader被指定了publicPath时，mini-css-extract-plugin-loader中的publicPath将不再生效

参考资料: github 答疑区

postcss-loader

{
    loader: "postcss-loader",
    options: {
        ident: "postcss",  // 固定写法
        plugins: [
        	require("postcss-preset-env")()  // 实例化插件
        ]
    }
}

package.json
{
    "browserslist": {
        "development": [
            "last 1 chrome version",  // 兼容最新一个版本的Chrome
            "last 1 firefox version",  // 兼容最新一个版本的Firefox
            "last 1 safari version"  // 兼容最新一个版本的Safari
        ],
        "production": [
            "> 0.2%",  // 兼容99.8%版本
            "not dead",  // 排除已淘汰的浏览器
            "not op_mini all" // 排除opera mini全部版本
        ]
    } // 不需要记忆
}

browserslist详解:

postcss-loader

{
    test: /\.(js|jsx)$/,
    include: path.resolve(__dirname, "src/js"),  // 需要检查的路径
    exclude: "/node_modules/",  // 不需要检查的路径（非自定义脚本不应该检查）
    loader: "babel-loader",
    options: {
    	presets: ["@babel/preset-env"]  //babel环境配置 
    }
},

存在的问题:

编译时报错TypeError: Cannot read property ‘bindings’ of null

已解决，网上的教程大多数都要求将babel环境配置为”env“，但是到webpack4.2以上应改为"@babel/preset-env"，并且如果没有安装@babel/cli也有可能导致上述问题（4.2以下是babel-cli）

参考资料: 博客园
Promise对象不能被转为es5语法

已解决，安装@babel/polyfill,并且在入口文件中使用import导入

@babel/polyfill导入后导致bundle体积大幅增加

**已解决，使用core-js按需加载，并将presets改为如下内容: **

options: {
    presets: [
        [
            "@babel/preset-env",
            {
                // 构建按需加载
                useBuiltIns: "usage",
                // 指定core-js版本 只填大版本即可
                corejs: {
                	version: 3
                },
                // 指定兼容浏览器版本
                targets: {
                    chrome: "60",
                    firefox: "60",
                    ie: "8",
                    safari: "10",
                    edge: "17"
                }
            }
        ]
    ]
}

eslint-loader

{
    test: /\.(js|jsx)$/,
    include: path.resolve(__dirname, "src/js"),  // 需要检查的路径
    exclude: "/node_modules/",  // 不需要检查的路径（非自定义脚本不应该检查）
    loader: "eslint-loader",
    options: {
    	fix: true  // 是否开启自动修复不标准语法
    }
}

package.json
"eslintConfig": {
    "extends": "airbnb-base",  // 语法参考Airbnb-Base支持es6语法
    "globals": {  // 允许使用哪些全局变量
      "document": true,   
      "window": true,
      "location": true
    },
    "rules": {  // 匹配规则
      "no-restricted-globals": "off",
      "no-plusplus": "off",
      "no-console": "off",
      "func-names": "off"
    }
}

存在的问题:

单独使用时加载到json文件会报错

跟babel-loader配合使用时未发生报错，暂未清楚原因

跟babel-loader一起使用时loader加载顺序为: eslint-loader -> babel-loader
使用@babel/polyfill等开发环境下的依赖时会抛出error ‘@babel/polyfill’ should be listed in the project’s dependencies, not devDependencies import/no-extraneous-dependencies 错误

已解决，在package.json的eslint配置下的eslintConfig中的rules里添加以下内容:
```
"import/no-extraneous-dependencies":  ["error", {"devDependencies": true}]
```
参考资料: 博客园