ducthangho
commented
2 years ago You can create a custom bundler using webpack as attached.
The part in webpack config (v5) is
module: {
rules: [{
test: /.(?:m?j|t)sx?$/,
include: [/node_modules/],
resolve: {
// Modules in node_modules might have a package.json
// stating "type": "module" (such as
// @babel/runtime/helpers/esm). In such a case any
// import statements are required to have mandatory file
// extensions.
//
// See:
// https://nodejs.org/api/esm.html#esm_mandatory_file_extensions
//
// To disable this set this resolution option to false.
fullySpecified: false,
},
}, {
test: /.(?:m?j|t)sx?$/,
exclude: [/node_modules/],
// loader: require.resolve('babel-loader'),
use: [{
loader: "babel-loader",
options: {
// Disable reading babel configuration
babelrc: false,
configFile: false,
// The configration for compilation
presets: [
["@babel/preset-env", presetEnvOptions],
"@babel/preset-react",
],
plugins: [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-object-rest-spread", [
"import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
},
"antd"
],
[
'import', {
"libraryName": '@ant-design/icons',
"libraryDirectory": 'es/icons',
},
'antd-icons',
],
]
}
}, ]
// options: babelOptions,
}, {
test: /.s?css$/,
type: "asset/inline",
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
}, {
test: /\.(png|svg|jpg|jpeg|gif)$/i,
include: [
PATHS.src
],
type: "asset/resource",
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
exclude: [/node_modules/],
use: [{
loader: '@svgr/webpack',
options: {
babel: true,
icon: true,
},
}, {
loader: "file-loader"
}, ],
type: "javascript/auto",
issuer: /\.(js|ts)x?$/
}, {
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto'
}],
},
I have a local svg file, but I can't load it. I'm getting this error:
Is it possible to add an svg loader to the webpack runtime?