Preact X + Babel 7 + Webpack 4 + WDS не работают - PullRequest
Новая
       58

Preact X + Babel 7 + Webpack 4 + WDS не работают

0 голосов
/ 08 мая 2019

Я пытаюсь настроить Webpack Dev Server, но ничего не работает, просто ничего не помещается в /dist.

Структура Dir : 

├── 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'
        }
    }
}

Возможно, я что-то не так делаю с сервером dev, но я все перепробовал, ничего не работает, даже без ошибок в вывод на консоль : 

$ 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 и использоватьэто в html-файле, размещенном в WDS.

Вот .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"
  }
}

1 Ответ

1 голос
/ 23 мая 2019

Я пытаюсь настроить 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'
    })
...