我知道加载器是用来转换模块的。但是假设我有一个文件需要一个特殊的过程,而这个过程不能用加载器来完成。我可以开发一个插件来完成这个过程吗?我知道插件可以做很多事情,包括添加新的资产。但是我不知道如何像加载器一样使用插件来转换文件
非常感谢你的支持
我的Webpack配置文件
const path = require('path');
const { CONSTANTS } = require("../helpers");
const isProductionMode = require("../util/isProductionMode");
const TerserPlugin = require("terser-webpack-plugin");
const { getEnabledExtensions } = require('../../../bin/extension');
module.exports.createBaseConfig = function createBaseConfig(
isServer
) {
const extenions = getEnabledExtensions()
const loaders = [
{
test: /\.m?js$/,
exclude: {
and: [/node_modules/],
not: [
/@evershop[\\/]core/,
// Include all enabled extension;
...extenions.map(ext => {
const regex = new RegExp(ext.resolve.replace(/\\/g, '[\\\\\\]').replace(/\//g, '[\\\\/]'));
return regex;
})
]
},
use: [
{
loader: path.resolve(CONSTANTS.LIBPATH, 'webpack/loaders/LayoutLoader.js'),
},
{
loader: path.resolve(CONSTANTS.LIBPATH, 'webpack/loaders/GraphqlLoader.js'),
},
{
loader: 'babel-loader?cacheDirectory',
options: {
sourceType: 'unambiguous',
cacheDirectory: true,
presets: [
[
"@babel/preset-env",
{
"targets": {
"esmodules": true
},
"exclude": ["@babel/plugin-transform-regenerator", "@babel/plugin-transform-async-to-generator"]
}
],
'@babel/preset-react'
]
}
}
]
}
];
const output = isServer ? {
path: CONSTANTS.BUILDPATH,
publicPath: CONSTANTS.BUILDPATH,
filename: isServer === true ? '[name]/server/index.js' : '[name]/client/index.js',
pathinfo: false
} : {
path: CONSTANTS.BUILDPATH,
publicPath: isProductionMode() ? '/assets/' : '/',
pathinfo: false
};
if (!isProductionMode()) {
Object.assign(output, {
chunkFilename: (pathData) => {
return `${pathData.chunk.renderedHash}/client/${pathData.chunk.runtime}.js`;
}
});
} else {
Object.assign(output, {
chunkFilename: (pathData) => {
return `chunks/${pathData.chunk.renderedHash}.js`;
}
});
}
if (isServer) {
output.libraryTarget = 'commonjs2';
output.globalObject = 'this';
};
const config = {
mode: isProductionMode() ? 'production' : 'development',
module: {
rules: loaders
},
target: isServer === true ? 'node12.18' : 'web',
output: output,
plugins: [],
cache: { type: 'memory' }
};
config.optimization = {};
if (isProductionMode()) {
config.optimization = Object.assign(config.optimization, {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
parse: {
// We want uglify-js to parse ecma 8 code. However, we don't want it
// to apply any minification steps that turns valid ecma 5 code
// into invalid ecma 5 code. This is why the 'compress' and 'output'
// sections only apply transformations that are ecma 5 safe
// https://github.com/facebook/create-react-app/pull/4234
ecma: 2020,
},
compress: {
ecma: 5,
warnings: false,
},
mangle: {
safari10: true,
},
output: {
ecma: 5,
comments: false,
// Turned on because emoji and regex is not minified properly using
// default. See https://github.com/facebook/create-react-app/issues/2488
ascii_only: true,
}
}
})
]
});
}
return config;
}
1条答案
按热度按时间gzszwxb41#
您能详细说明您要加载的文件类型吗?Webpack几乎可以加载与Web开发相关的任何内容。我建议在使用Webpack加载某些文件之前对其进行处理。Webpack加载器库