Question

我是webpack中的新手，我使用webpack 4作为我的项目。但我有一个问题，我有一些文件脚本。在第一次使用webpack dev服务器构建时，它运行正常。但是当服务器运行时，我继续创建一个新文件脚本（例如：c.js），重命名或删除存在的文件，服务器不会自动将此脚本构建到main.js.如何自动webpack重建我的新文件（c.js）到main.js而不再运行命令？

这是我在github上的回购： https://github.com/aiduc93/webpack4-scss-pug-es6

您可以按照此步骤重现我的问题：

第1步：使用＆nbsp运行dev＆＃39; npm启动服务器并在浏览器中运行localhost：3000。

步骤2：当服务器运行时，我们创建新文件（c.js），您可以将我的代码复制到hide.js或show.js中，并将pluginName更改为＆＃39; any＆＃39;（即：pluginName =＆＃39;可点击＆＃39）

步骤3：转到index.pug，创建具有数据可点击性的新p标签（即：p（可点击数据）可点击）

步骤4：在浏览器中刷新页面，然后单击可单击的文本。 Js不会运行，因为它不会重新编译。

这是我的结构

ObtainAuthToken

这是package.json中的脚本

//folder javascript in project
  javascript
     | hide.js
     | show.js
     | server.js
//folder dist after build
  dist
     | main.js

这是webpack.config.js

＆＃13;

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --inline --hot",
"build": "webpack --mode production"},

＆＃13;

Answer 1

在webpack 4中，只有真正的入口点是入口点，这意味着，入口处没有供应商脚本，插件...... 你不能在这里使用glob因为它创建了一个包含所有js文件的数组，只有server.js才是你应用程序的真正入口点！

将js文件添加到您的wp项目并不意味着它将被编译，因为您没有在任何地方引用它，因此wp无法知道它是否需要。 WP从入口点的依赖关系开始创建依赖关系图，并创建捆绑包。

您的server.js是您的入口点，应如下所示：

import "../stylesheets/style.scss";
import $ from 'jquery';
import "./clickable"  // without import no recompile!
import "./hide"
import "./show"

console.log("his");
console.log("hello, world23");

webpack.config.js中的切入点：

module.exports = {
    entry: {
      main: path.resolve(__dirname, "./src/javascripts/server.js")
      },

如何在没有运行命令的情况下使用webpack-dev-server自动重建bundle？

1 个答案: