防止 Webpack 修改 javascript 文件答案

【问题标题】：Prevent Webpack from modifying javascript files防止 Webpack 修改 javascript 文件
【发布时间】：2022-04-08 10:06:43
【问题描述】：

我的纯 HTML、CSS 和 Javascript 应用程序中有 webpack。我使用 webpack 将 scss 转换为 CSS。我希望我的 javascript 在我的 dist 文件夹中保持不变，因为我想稍后在我的 wordpress 项目中编辑它。 Webpack 正在添加大量代码，这使得 JS 文件以后难以编辑。这是我的 config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { HotModuleReplacementPlugin } = require("webpack");
const HtmlWebpackPartialsPlugin = require("html-webpack-partials-plugin");

module.exports = {
  mode: "development",
  entry: {
    index: "./src/js/index.js",
    about: "./src/js/about.js",
    courses: "./src/js/courses.js",
    contactUs: "./src/js/contact-us.js",
  },
  output: {
    filename: "js/[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
    assetModuleFilename: "images/[name][ext]",
  },
  devServer: {
    static: { directory: path.join(__dirname, "dist") },
    port: 9000,
    hot: true,
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
    }),
    new HtmlWebpackPlugin({
      title: "Leads",
      filename: "index.html",
      template: "./src/pages/index.html",
      chunks: ["index"],
    }),
    new HtmlWebpackPlugin({
      title: "Leads About",
      filename: "about-us.html",
      template: "./src/pages/about-us.html",
      chunks: ["about"],
    }),
    new HtmlWebpackPlugin({
      title: "Courses",
      filename: "courses.html",
      template: "./src/pages/courses.html",
      chunks: ["courses"],
    }),
    new HtmlWebpackPlugin({
      title: "Contact Us",
      filename: "contact-us.html",
      template: "./src/pages/contact-us.html",
      chunks: ["contactUs"],
    }),
    new HtmlWebpackPartialsPlugin({
      path: path.join(__dirname, "./src/partials/footer.html"),
      location: "partialfooter",
      template_filename: [
        "index.html",
        "about-us.html",
        "courses.html",
        "contact-us.html",
      ],
    }),
    new HtmlWebpackPartialsPlugin({
      path: path.join(
        __dirname,
        "./src/partials/components/infrastructure.html"
      ),
      location: "infrastructure",
      template_filename: [
        "index.html",
        "about-us.html",
        "courses.html",
        "contact-us.html",
      ],
    }),
    new HotModuleReplacementPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: "/node_modules",
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          // Creates `style` nodes from JS strings
          //   "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
    ],
  },
  optimization: {
    minimize: false,
  },
};

如何让 webpack 转换我的 sass 文件，而只是复制我的 JS 文件？

【问题讨论】：

使用raw-loader 而不是babel-loader
当我使用原始加载器时，我仍然在我的 javascript 文件中看到 webpack javascript 代码。我希望 javascript 文件实际上是完整的

标签： javascript html css webpack sass

【解决方案1】：

也许您可以使用 copy-webpack-plugin https://webpack.js.org/plugins/copy-webpack-plugin/ 将文件从 src 静态文件夹复制到构建目标文件夹。大概是这样 -

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
plugins: [
    new CopyPlugin({
    patterns: [
        { from: "source", to: "dest" },
        { from: "other", to: "public" },
    ],
    }),
],
};

Webpack 添加的代码可以为 JavaScript 提供许多功能，例如将 ES6 JavaScript 转换为 ES5、捆绑、代码拆分和动态导入。但是，如果您不需要它们，则可以直接复制。

【讨论】：