Webpack-dev-server как включить комплектацию - PullRequest
Новая
       15

Webpack-dev-server как включить комплектацию

0 голосов
/ 04 октября 2018

Я пытаюсь переключиться с использования webpack в моей среде разработки на использование webpack-dev-server.

Все отлично работает в том смысле, что пакет правильно создан и находится в памяти на http://localhost:8080/path/to/bundle.Но я не могу получить доступ к этому пути, так как браузер блокирует смешанный контент, и файл не доступен через https.

Так что это моя первая проблема, но дать, что я могу решить эту проблему, я не могупросто включите файл, сказав

<script src='http://localhost:8080/path/to/bundle'>, потому что это не сработает, когда я запусту его в производство.

Я смотрел и читал кучу разных уроков, но, похоже, не могудействительно понимаю, как это работает.Для справки, это мой конфигурационный файл: 

module.exports = {
    entry: "./npm_views/entry.js",
    output: {
        filename: "npm_bundle.js",
        publicPath: '/build',
        path: path.resolve(__dirname, "build/"),
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                include: /npm_views/,
                loader: "babel-loader",
                query: {
                    presets: ['react' ,'env'],
                    plugins: ['transform-class-properties']
                }
            }
        ]
    },
}

1 Ответ

0 голосов
/ 04 октября 2018

Я нашел решение своей проблемы и хотел бы оставить рекомендацию для всех, кто переключается с webpack на webpack-dev-server:

Сначала вы захотите добавить общедоступныйпуть к вашему webpack.config.js файлу: 

module.exports = {
    ...
    output: {
        ...
        filename: "bundle.js",
        publicPath: '/build',
        ...
    },
    ...
}

webpack-dev-server раскручивает сервер, работающий на порту 8080, с загруженным файлом и доступным из указанного вами имени publicPath +.Поэтому, если вы хотите включить его , вам нужно будет добавить тег сценария, подобный этому:

<script src='http://localhost:8080/build/bundle.js'>

или, в более общем случае,

<script src='http://localhost:8080/publicPath/filename'>

Теперь первая проблема заключается в том, что в работе вы не будете использовать webpack-dev-server.Вы будете использовать веб-пакет, который создает файл сборки по указанному пути.Так что вам нужно будет сделать что-то подобное в вашем html, который включает в себя пакет: 

<?php

$BundlePath = IsThisMyLocalMachine ? 'http://localhost:8080/publicPath/filename' : 'build\bundle.js'

?>

<html>
...
<script src='<?php echo $BundlePath ?>'>
..
</html>

Теперь последняя проблема заключается в том, что если ваш сайт использует https и webpack-dev-server serveпри сборке http браузер блокирует его как смешанный контент.

Обойти это довольно просто. Вам просто нужно указать webpack-dev-server об отправке контента на https, добавив это в свой файл конфигурации: 

module.exports = {
    ...
    output: {
        ...
        filename: "bundle.js",
        publicPath: '/build',
        ...
    },
    devServer: {
        https: true,
    },
    ...
}

Теперь, если вы измените все эти http://localhost:8080/ на https://localhost:8080/ все должно работать нормально

...