1

我的文件：

page1.js

import nameFunction from "./nameHelper"

page2.js

import nameFunction from "./nameHelper"
import users from "./users"

page3.js

import users from "./users"

我得到什么：

│   package.json
│   page1.html
│   webpack.config.js
│
├───dist
│   └───scripts
│           page1.js
│           page2.js
│           page3.js
│           Scripts_js_nameHelper_js.js
│           Scripts_js_users_js.js
└───Scripts
    └───js
            nameHelper.js
            page1.js
            page2.js
            page3.js
            users.js

我想要的是：

├───dist
│   └───scripts
│           page1.js
│           page2.js
│           page3.js
│           page1_page2_nameHelper.js
│           page2_page3_users.js

Webpack 5配置：

module.exports = {
  entry: {
    page1: "./Scripts/js/page1.js",
    page2: "./Scripts/js/page2.js",
    page3: "./Scripts/js/page3.js",
  },

  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, dirName),
  },
  // devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules|bower_components/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
  plugins: [new CleanWebpackPlugin()],
  optimization: {
    splitChunks: {
      chunks: "all",
      minSize: 0
    },
  },
};

我需要它来轻松地将所有相关文件添加到我的 .NET MVC 页面中的脚本标记中。

<script type="text/javascript" asp-src-include="~/dist/*page1_*.js"></script>

除非有另一种解决方案，只在页面的 script 标签中添加一个 js 文件。我真的不喜欢使用HtmlWebpackPlugin和处理模板文件，而不是直接使用.cshtml文件。

<script type="text/javascript" src="~/page1.js"></script>

因为每个页面的入口文件将保持不变，而块文件将不断更改名称和数量 - 不断。

4

0 回答 0