Webpack 未構建最新更改

Question

我正在做一個來自https://medium.com/ethereum-developers/the-ultimate-end-to-end-tutorial-to-create-and-deploy-a-fully-descentralized-dapp-in的相當簡單的項目-ethereum-18f0cf6d7e0e

由於本教程不關注前端部分（webpack 和 babel 等），我從不同的地方挑選了這些步驟。

現在我嘗試使用 webpack 和 http-server 構建前端，但我意識到它並沒有隨着我對文件所做的更改而更新。

webpack.config.js

const path = require('path')
module.exports = {
   entry: path.join(__dirname, 'src/js', 'index.js'), // Our frontend will be inside the src folder
   output: {
      path: path.join(__dirname, 'dist'),
      filename: 'build.js' // The final file will be created in dist/build.js
   },
   module: {
      rules: [{
         test: /\.css$/, // To load the css in react
         use: ['style-loader', 'css-loader'],
         include: /src/
      }, {
         test: /\.jsx?$/, // To load the js and jsx files
         loader: 'babel-loader',
         exclude: /node_modules/,
         query: {
            presets: ['@babel/preset-env', '@babel/preset-react']
         }
      }]
   }
}

package.json

{
  "name": "test-app",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "^7.10.2",
    "@babel/preset-react": "^7.10.1",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.5.3",
    "json-loader": "^0.5.7",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "style-loader": "^1.2.1",
    "web3": "^0.20.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  },
  "directories": {
    "test": "test"
  },
  "dependencies": {},
  "description": ""
}

我使用它構建它

 npx webpack --config webpack.config.js  

然后上桌

 http-server dist/

我該如何解決？ 這甚至是正確的方法嗎？ 謝謝。

Answer 1

你已經在你的依賴項中安裝了 webpack-cli，所以你不必在命令中添加配置：

首先在您的 Package.json 中添加 Webpack 腳本：

  "scripts": {
    "watch": "webpack --watch",
  },

當你運行npm run watch --watch webpack 將繼續觀察任何已解析文件的變化。

對於服務器，我推薦你webpack-dev-server

npm i webpack-dev-server

可用於快速開發應用程序

module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

並將其添加到您的 npm 腳本中

 "scripts": {
        "watch": "webpack --watch",
        "start": "webpack-dev-server --hot --open",
      }

現在我們可以run npm start ，我們將看到我們的瀏覽器自動加載我們的頁面。 如果您現在更改任何源文件並保存它們，web 服務器將在代碼編譯后自動重新加載。

建議：您必須在 dist 中添加 html 文件或 webpack HtmlWebpackPlugin插件