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

السؤال

نشر

لدي حزمة  لمشاهدة جميع ملفاتي باستخدام 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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...