Question

我尝试设置Webpack Dev Server，但没有任何效果，只是没有将任何内容放入/dist中。

目录结构：

├── dist
│   └── (empty)
├── package.json
├── public 
│   └── index.html
├── src
│   ├── index.js 
│   └── style.css
├── webpack.config.js
└── yarn.lock

这是我的webpack配置：

const { resolve } = require('path')

module.exports = {
    entry: __dirname + '/src/index.js',
    output: {
        path: __dirname + '/dist'
    },
    devServer: {
        contentBase: __dirname + '/public',
        inline: true,
        port: 80
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                include: resolve(__dirname, 'src'),
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            babelrc: true
                        }
                    }
                ]
            },
          {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
        ]
    },
    resolve: {
        alias: {
          'react': 'preact/compat',
          'react-dom': 'preact/compat'
        }
    }
}

也许我在开发服务器上做错了什么，但是我尝试了一切，但没有成功，甚至在控制台输出中没有错误：

$ webpack-dev-server
ℹ ｢wds｣: Project is running at http://localhost:80/
ℹ ｢wds｣: webpack output is served from /assets
ℹ ｢wds｣: Content not from webpack is served from /public
ℹ ｢wdm｣: Hash: a4299a80758757ab09d6
Version: webpack 4.30.0
Time: 12583ms
Built at: 05/08/2019 4:49:40 PM
  Asset      Size  Chunks             Chunk Names
main.js  4.48 MiB    main  [emitted]  main
Entrypoint main = main.js
[0] multi (webpack)-dev-server/client?http://localhost:80 ./src/index.js 40 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB
{main} [built]
[./node_modules/ansi-regex/index.js] 135 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/preact/compat/dist/compat.module.js] 4.58 KiB {main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {main} [built]
[./node_modules/react-monaco-editor/lib/index.js] 474 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:80] (webpack)-dev-server/client?http://localhost:80 8.26 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170
bytes {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[./src/index.js] 268 bytes {main} [built]
    + 380 hidden modules
ℹ ｢wdm｣: Compiled successfully.

在浏览器中，我收到此消息，我知道为什么：dist文件夹为空！

Loading failed for the <script> with source “http://localhost/assets/index.js”.

我的任务是仅编译js并将其用于WDS上托管的html文件中。

如果需要，这里是 .babelrc 和 package.json ：

{
    "presets": [
        ["@babel/preset-env", {
            "targets": {
              "browsers": [
                "last 2 versions"
              ]
            },
            "modules": false
            }],
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-proposal-class-properties"
    ]
}

{
  "name": "sl-sandbox",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "autoprefixer": "^9.5.1",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "cssnano": "^4.1.10",
    "monaco-editor-webpack-plugin": "^1.7.0",
    "postcss": "^7.0.16",
    "postcss-loader": "^3.0.0",
    "precss": "^4.0.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  },
  "scripts": {
    "dev": "webpack-dev-server"
  },
  "dependencies": {
    "preact": "^10.0.0-beta.1"
  }
}

Answer 1

我尝试设置Webpack Dev Server，但没有任何效果，只是没有在/ dist中放入任何内容。

默认情况下，WDS不会在输出文件夹中生成生成结果。它使用了更快的内存文件系统。

源“ http://localhost/assets/index.js”的加载失败。

我没有看到用于创建html文件的任何配置，该配置将指定在您的网站启动/加载时应加载哪些js文件。

您应该使用html-webpack-plugin：

new HtmlWebpackPlugin({ title: 'My App' })

此外，您可以创建自己的index.html文件，HtmlWebpackPlugin将使用该文件创建副本并对其进行编辑（而不是使用此插件提供的默认index.html）：

new HtmlWebpackPlugin({
      title: 'My App',
      filename: 'path/to/index.html'
    })

Answer 2

尝试像这样编辑.babelrc文件： https://preactjs.com/guide/v10/getting-started#setting-up-jsx

{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "pragma": "h",
      "pragmaFrag": "Fragment",
    }]
  ]
}

经过几次尝试，这对我有用。

我也将./src/index.js文件更改为./src/index.jsx-（使用import {h,render} from "preact";），不过不知道它是否有作用

Preact X + Babel 7 + Webpack 4 + WDS不起作用

2 个答案: