我正在制作一个注入内容脚本的 chrome 扩展。我不希望 webpack 处理内容脚本。
我的目录结构:
/extension
|-manifest.json
|--scripts
|- background.js
|- content
|-- script1.js
|-- script2.js
|-- ...
这是我调用 webpack 的 gulp 任务:
gulp.task('js', (cb) => {
return gulp.src(['source/scripts/**/*.js'])
.pipe(plumber({
errorHandler: function(errors) {
}
}))
.pipe(named())
.pipe(gulpWebpack({
watch: args.watch,
module: {
rules: [
{
enforce: "pre",
test: /\.json$/,
loader: "json-loader"
},
{
enforce: "pre",
test: /\.(gif|jpe?g|png)$/,
loader: "file-loader?name=img/[name].[ext]",
},
{
enforce: "pre",
test: /content\//,
loader: "file-loader?name=content/[name].[ext]",
},
{
test: /\.js$/,
loader: "babel-loader",
exclude: [
/content/
]
}
],
},
}, null, (err, stats) => {
log(`Finished '${colors.cyan('js')}'`, stats.toString({
chunks: false,
colors: true,
cached: false,
children: false
}));
}))
.pipe(gulp.dest(`/scripts`))
});
我想将目录结构保留在构建目录中,而不是让里面的文件content/
被解析,即。使用file-loader
但它们只是被解析,我pre
的内容脚本规则被忽略了。