![](/img/trans.png)
[英]Process a sass file in webpack multiple times (multiple configurations)
[英]Webpack - Include file multiple times
我想通过两个不同的加载程序两次包含一个文件。 原因是我想在 ES6 中显示代码片段,同时允许它们在不支持语法的浏览器中运行。
实际上我想要实现的是以下但两个加载器结果都包含在输出中 -
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.(js|jsx)$/,
include: /app\/examples/,
use: [
{
loader: "file-loader",
options: {
regExp: /app\/examples\/([^\/]+)\/([^\.]+)+\.jsx?$/,
name: 'examples/[1]/[2].example',
}
}
]
}
在我的 webpack 配置中使用上述内容
import example from '../../examples/simple/ex1'
结果是
Module {default: "examples/simple/ex1.example", __esModule: true, Symbol(Symbol.toStringTag): "Module"}
而不是像我希望的那样通过 babel 运行代码。
const multi = require('multi-loader');
const combineLoaders = require('webpack-combine-loaders');
module: {
loaders: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
include: /app\/examples/,
loader: multi(combineLoaders([
{ loader: 'file-loader' },
{ loader: 'babel-loader' },
]))
},
]
}
这应该可以解决问题。 您还必须使用 combineLoaders ,因为您必须使用选项对象。 在 combine loaders 数组中,您也可以传递 loader 配置。
我最终无法用装载机处理这个问题——尽管通过进一步阅读,我认为这无论如何都不是正确的方法。 相反,我现在使用 copy-webpack-plugin 来复制文件 -
plugins: [
new CopyWebpackPlugin([ {
from: path.join(rootDir, 'app', 'examples'),
to: path.join(outputDir, 'examples')
}])
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.