Как автоматически перестроить пакет с помощью webpack-dev-server без команды run снова? - PullRequest
Новая
       17

Как автоматически перестроить пакет с помощью webpack-dev-server без команды run снова?

0 голосов
/ 20 мая 2018

Я новичок в веб-пакете и использую веб-пакет 4 для своего проекта.Но у меня проблема, у меня есть несколько файловых скриптов.В первый раз при сборке с сервером webpack, он работает нормально.Но когда сервер работает, я продолжаю создавать новый файловый скрипт (пример: c.js), переименовываю или удаляю существующий файл, который сервер не создает автоматически в этот скрипт в main.js.Как может автоматический веб-пакет перестроить мой новый файл (c.js) в main.js без команды run снова?

Это мой репозиторий на github: https://github.com/aiduc93/webpack4-scss-pug-es6

Вы можете выполнить этот шаг, чтобы воспроизвести мою проблему:

Шаг 1: запустить сервер с помощью 'npm run dev' и запустить localhost: 3000 в браузере.

Шаг 2: когда сервер работает, мы создаемВ новом файле (c.js) вы можете скопировать мой код в hide.js или show.js и изменить имя_плагина на «что угодно» (то есть: pluginName = «clickable»)

Шаг 3: перейти к индексу.pug, создайте новый тег p с кликабельными данными (то есть: кликаемыми по р (щелкающими по данным))

Шаг 4: обновите страницу в браузере и кликните по тексту по клику.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(),
  ]
};

1 Ответ

0 голосов
/ 22 мая 2018

В веб-пакете 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")
      },
...