webpack 官方文档的配置案例

最新推荐文章于 2023-11-06 20:29:41 发布

一袋米哟扛几楼

最新推荐文章于 2023-11-06 20:29:41 发布

阅读量126

点赞数

分类专栏： webpack 文章标签： webpack js npm

本文链接：https://blog.csdn.net/weixin_41481695/article/details/114578549

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

webpack 官方文档的配置案例

//webpack.config.js
const path = require('path');
const toml = require('toml');
const yaml = require('yamljs');
const json5 = require('json5');
const { parse } = require('path');


module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [

            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],//此处的顺序需注意'style-loader'在'css-loader'前面
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource'
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource'
            },
            {
                test: /\.(csv|tsv)$/i,
                use: ['csv-loader'],
            },
            {
                test: /\.xml$/i,
                use: ['xml-loader']
            },
            {
                test: /\.toml$/i,
                type: 'json',
                parser: {
                    parse: toml.parse
                }
            },
            {
                test: /\.yaml$/i,
                type: 'json',
                parser: {
                    parse: yaml.parse
                }
            },
            {
                test: /\.json5$/,
                type: 'json',
                parser: {
                    parse: json5.parse
                }
            }
        ]
    }
}