我们有一个项目,其中包含老聪明部分和React部分。
我们将React-Part文件与Webpack捆绑在一起。
我们也希望将非反应零件文件与webpack捆绑在一起,但是该文件比项目树中的webpack更高。这是一个问题:我们需要将它们捆绑在一起并将结果放置到grand-grand-parent-parent目录中...那么,如何为该入口点拆分规则?
const ExtractJS = new ExtractTextPlugin({
filename: "../../[name].min.js"
});
module.exports = {
entry: {
reactApp: ["./src/entries/reactApp/index.tsx"],
// JS -- we need to place it "upper" than webpack directory in project
"scripts/oldStuff": ["./src/entries/oldStuff/index.js"]
},
module: {
rules: [
{
test: /\.js?$/,
loader: "babel-loader",
exclude: /node_modules/,
options: {
cacheDirectory: true,
presets: [["es2015", { modules: false }], "stage-2", "react"],
plugins: ["transform-node-env-inline"],
env: {
development: {
plugins: ["react-hot-loader/babel"]
},
targets: {
browsers: ["last 2 versions", "ie >= 10"]
}
}
}
},
{
test: /\.js?$/,
include: [/(.*?)scripts(.*?)/, /(.*?)lib(.*?)/],
use: ExtractJS.extract({
use: {
loader: "raw-loader"
}
})
}
}
}
}
尝试使用include
和exclude
选项解决此问题,但这看起来并不好-我们得到了“交叉输入”文件(诸如/lib/foo/bar.js
这样的React部分和{ {1}}(未反应的部分)及其大约15-20个文件...
这是一个主要问题:是否可以排除一个规则的入口点,而将另一个规则包括它(其他入口点除外)?