При использовании Webpack, в какой папке я использую статический сервер?

Предполагая, что я хочу (мой босс делает меня) использовать Webpack, и у меня есть файл структуры, как:При использовании Webpack, в какой папке я использую статический сервер?

В чем builds где WebPack выводит результат пакетирования/компиляции папку src, как тогда у меня есть index.html, указывающий на bundle.js, если он присутствует на сервере, т.е. какую папку я могу открыть через express.static()? Каков правильный способ «webpack» для этого, например, простой webpack.config, как показано ниже? Мне не хватает чего-то фундаментального в том, как это работает? В идеале я хотел бы сделать что-то вроде следующего в моей index.html

<html> 
<script src='bundle.js'></script> 
<!-- bundle.js spits a bunch of CSS into the html, dynamically builds elements, etc --> 
</html>

Или это не так, как все делается в WebPack?

webpack.config.js

module.exports = { 
    entry: './src/index.js', 
    output: { 
     path:  'builds', 
     filename: 'bundle.js', 
    }, 
    module: { 
     loaders: [ 
      { test: /\.css$/, 
       loader: "style!css" 
      } 
     ] 
    } 
};

Я попытался выяснить это с помощью the docs и this oft-linked article.

источник

2016-09-24 komali_2

С его хорошей практикой не раскрывать какую-либо структуру вашего каталога конечным пользователям, так как это создает вероятность для использования в Интернете, nodejs с express имеет механизм для обработки этого. Что вы можете сделать, это выставить таким образом ваш WebPack

app.use('/buidscript', express.static(__dirname + '/builds/'));

Затем любые запросы браузера от /buidscript/bundle.js будет автоматически извлекаются из сборок каталога.

<script src='/buidscript/bundle.js'></script>

Теперь вы можете собирать свои мысли вокруг этого, чтобы сделать его каким бы то ни было способом.

Для вашего идеального случая, который вы ищете

app.use(express.static(__dirname + '/builds'));

Теперь вы можете использовать

<script src='bundle.js'></script>

также запрос bundle.js будет искать в открытой статической сборки Адресной книги

Добавить его к сценарию package.json

“scripts”: { 
“start”: “webpack-dev-server --content-base build/ --inline --hot”, 
... 
} 
// Use it by running 
$ npm start

Теперь это создаст ваш bundle.js перед запуском index.html в режиме разработки.

--content-base build/

будет хранить статические файлы в вашей сборке. поэтому вы можете напрямую использовать bundle.js. Он будет искать любые изменения файлов и перекомпилировать bundle.js

источник

2016-09-24 03:21:24 Cyclotron3x3

Да, это именно то, что я имею в виду. Если я выставляю '/ builds', то клиенты' bundle.js' могут получить доступ к клиентам. Однако 'index.html' не может, и если я сервер' index.html', у него нет доступа к 'bundle.js' –

. Если я пойду с вашим предложением, я бы разложил папку' builds' с копией моего файла index.html в нем, а затем сервер развертывания также добавит туда файл 'bundle.js'. –

Я до сих пор не понял, почему index.html не сможет получить доступ к bundle.js. при использовании webpack вы должны различать среду разработки и производства.См. Обновленный ответ – Cyclotron3x3

При использовании Webpack, в какой папке я использую статический сервер?

ответ

Смежные вопросы