اذهب إلى المحتوى
  • 0

تعمل watch true فقط على package.json ، وليس على جميع الملفات في Webpack

محمد لارافيل

السؤال

لدي حزمة  لمشاهدة جميع ملفاتي باستخدام watch : true في webpack.config.js. أقوم بتشغيل الأمر npm run build من خلال هذا الكود في package.json:

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

الآن عندما أستخدم npm run build ، يتم تجميعه فقط في كل مرة أحفظ فيها package.json. كيف يمكنني تغييره بحيث يتم تجميعه في كل مرة أحفظ فيها ملفا في جميع مجلداتي؟

package.json

{
  "name": "testproj",
  "version": "1.0.0",
  "description": "",
  "main": "code.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "Figma",
  "license": "MIT",
  "devDependencies": {
    "@figma/plugin-typings": "*",
    "@types/node": "^16.7.1",
    "css-loader": "^6.2.0",
    "html-webpack-inline-source-plugin": "0.0.10",
    "html-webpack-plugin": "^5.3.2",
    "style-loader": "^3.2.1",
    "ts-loader": "^9.2.5",
    "typescript": "^4.3.5",
    "url-loader": "^4.1.1",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0"
  },
  "dependencies": {
    "@types/react": "^17.0.19",
    "@types/react-dom": "^17.0.9",
    "figma-plugin-ds": "^1.0.1",
    "react": "^17.0.2",
    "react-dev-utils": "^11.0.4",
    "react-dom": "^17.0.2"
  }
}

webpack.config.js

const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')

const path = require('path')
const webpack = require('webpack')

module.exports = (env, argv) => ({
  watch: true,
  watchOptions: {
    ignored: /node_modules/,
  },

  mode: argv.mode === 'production' ? 'production' : 'development',

  devtool: argv.mode === 'production' ? false : 'inline-source-map',

  entry: {
    ui: './src/ui.tsx',
    code: './src/code.ts',
  },

  module: {
    rules: [
      { 
        test: /\.tsx?$/, 
        use: 'ts-loader', 
        exclude: /node_modules/
      },

      { 
        test: /\.css$/, 
        use: ["style-loader", "css-loader"],
      },
      { 
        test: /\.svg/,
        type: 'asset/inline'
      }
    ]
  },

  resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'] },

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'), 
  },

  plugins: [
    new webpack.DefinePlugin({
      'global': {}
    }),
    new HtmlWebpackPlugin({
      inject: "body",
      template: './src/ui.html',
      filename: 'ui.html',
      chunks: ['ui']
    }),
    new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/ui/]),
  ],
})

أرجو المساعدة وشكرا مقدما.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

الأمر build مخصص لتجهيز الموقع للرفع علي الاستضافة 

فالأفضل أن تقوم بتخصيص أمر لوضع التطوير  لنفترض اننا سنسميه start فيكون الكود كالأتي:

    "start": "webpack serve --open"

و Serve هي ما ستقوم بمتابعة أي تغيير في الكود 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...