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

Question

我是 webpack 的新手，我正在为我的项目使用 webpack 4。但是我有一个问题，我有一些文件脚本。第一次用webpack dev server搭建，运行还行。但是当服务器运行ning 时，我继续创建一个新的文件脚本（例如：c.js），重命名或删除现有文件，服务器不会自动将此脚本构建为 main.js。自动 webpack 如何在没有运行命令的情况下将我的新文件 (c.js) 重建为 main.js？

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

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

第 1 步：在浏览器中使用 'npm run dev' 和运行 localhost:3000 启动服务器。

第2步：当服务器运行ning时，我们创建新文件(c.js)，你可以在hide.js或show.js中复制我的代码并更改插件名称到 'anything'（即：pluginName='clickable'）

第 3 步：转到 index.pug，创建带有数据可点击的新 p 标签（即：p(data-clickable) 可点击）

第四步：在浏览器中刷新页面并点击文本可点击。 Js不会运行因为它不会重新编译。

这是我的结构

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

这是package.json

中的脚本

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

这是webpack.config.js

const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
module.exports = { 
  entry: { main: glob.sync('./src/**/*.js*')} ,
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  devtool: 'inline-source-map',
  watch: true,
  
  module: {
    
    rules: [
      {
        test: /\.pug$/,
        use: ["html-loader", "pug-html-loader"]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["babel-loader"]

      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract(
          {
            fallback: 'style-loader',
            use:  [   'css-loader', 'sass-loader']
          })
      },
      {
        type: 'javascript/auto',
        test: /\.json$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: "./plugin-config/[name].[ext]"
            }
          }
        ]
      }
    ]
  },

  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    inline: true,
    port: 3000,
    // historyApiFallback: true,
    hot: true
  },
  plugins: [
    new ExtractTextPlugin(
      { filename: 'style.css'}
    ),
    new CleanWebpackPlugin('dist', { watch: true,
    }),
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
    }),
    new WebpackMd5Hash(),
  ]
};

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 自动重建包？

How to auto-rebuild bundle with webpack-dev-server without run command again?

javascript

webpack

webpack-dev-server

rebuild

webpack-4

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

How to auto-rebuild bundle with webpack-dev-server without run command again?

javascript

webpack

webpack-dev-server

rebuild

webpack-4

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