Webpack 5 - 开发安装在 node_module 中的包

Question

问题很简单。我有一个项目，我正在使用开发的 npm 包。我想配置我可以编辑的开发环境：我的应用程序的源代码和 node_module 文件夹中的一个包。所以结构类似于

- frontend <- want to edit this files
  - node modules
    ...
    -my-own-package

问题是我可以看到网络服务器正在对“我自己的程序包”的更改做出反应，但结果有点像缓存之类的。我看不到代码中的更改。我试图禁用缓存，但 webpack-dev 服务器进入了无限的 recomile 循环。我怎样才能正确地做到这一点？

mydev webpack 配置会像这样：


const path = require('path');
const common = require('./webpack.common.config')
const { merge } = require('webpack-merge');
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = merge(common, {
  mode: "development",


  entry: ["./index.js",path.resolve(__dirname, "node_modules/my-own-package")],
  devServer: {
      port: 80,
      host: '0.0.0.0',
      historyApiFallback: true,
      disableHostCheck: true,
      watchOptions: {
          aggregateTimeout: 500,
          poll: 1000,
            
      }
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader", //2. Inject styles into DOM
          "css-loader" //1. Turns css into commonjs
        ]
      }
    ]
  }
});

Answer 1

解决方法：

据我所知，目前没有这样的选项。解决方法是玩resole 只需将您的库放在前端旁边的文件夹中（在我的例子中是“依赖项”）

module.exports = merge(common,
   {  mode: "development",  
   resolve: {
         modules: ['dependencies' , 'node_modules' ], 
   },

那就好了

Webpack 5 - 开发安装在 node_module 中的包

Webpack 5 - develop package mounted in node_module

webpack

webpack-dev-server