@frilix
Иногда "творю"

Webpack Dev Server динамическое название скрипта?

Добрый день! Пытаюсь настроить dev сервер для работы с React, но что-то не выходит. Делал по туториалу: тут

webpack.base.config.js
var path = require("path")
var webpack = require('webpack')

module.exports = {
    context: __dirname,

    entry: {
        app: ['webpack-dev-server/client?http://localhost:3000', 'webpack/hot/only-dev-server', './app/app.js'],
        vendors: ['react'],
    },

    output: {
        path: path.resolve('../engine/static/bundles/local/'),
        filename: '[name]-[hash].js',
        publicPath: 'http://localhost:3000/',
    },

    externals: [
    ], // add all vendor libs

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.optimize.CommonsChunkPlugin({name: 'vendors', filename: 'vendors.js'}),
    ], // add all common plugins here

    module: {
        rules: [] // add all common loaders here
    },

    resolve: {
        modules: ['node_modules', 'bower_components'],
        extensions: ['.js', '.jsx']
    },
}


webpack.local.config.js
var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
var config = require('./webpack.base.config.js')

config.devtool = "#eval-source-map"

config.plugins = config.plugins.concat([
  new BundleTracker({filename: '../engine/static/bundles/webpack-stats-local.json'}),
])

config.module.rules.push(
  { test: /\.jsx?$/, exclude: /node_modules/, use: ['react-hot-loader', 'babel-loader'] }
)

module.exports = config;


server.js
var webpack = require('webpack')
var WebpackDevServer = require('webpack-dev-server')
var config = require('./webpack.local.config')

new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    inline: true,
    historyApiFallback: true,
}).listen(3000, '0.0.0.0', function (err, result) {
    if (err) {
        console.log(err)
    }

    console.log('Listening at 0.0.0.0:3000')
})


index.html
<html lang="en">
    <head>
        <title>App</title>
    </head>
    <body>
        <div id='app'></div>
    </body>
</html>


Не понимаю как мне добавить build файл, чтоб он потягивался в html.

PS. В туториале вообще не написан index.html
  • Вопрос задан
  • 203 просмотра
Решения вопроса 1
@frilix Автор вопроса
Иногда "творю"
webpack loader, который стоит как джанго приложение берет все на себя, таким образом файл index.html не нужен. запуск таков:
node server.js
./manage.py runserver


Hot Reaload все "ловит" на ходу. Были проблемы с CORS, решение:

new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    inline: true,
    historyApiFallback: true,
    headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
        "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
    }
// ...
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы