Сохранение структуры папок в выходном каталоге с помощью веб-пакета

У меня есть следующая структура папок:

/index.html
/app/index.tsx

После связывания с веб-пакетом я хотел бы иметь следующий выходной каталог с bundle.js, внедренным в index.html

/dist/index.html
/dist/app/bundle.js
/dist/app/bundle.js.map

У меня есть следующая конфигурация webpack

var webpack = require("webpack")
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = [
    {
        entry: "./app/index",
        output: {
            path: "./dist/app",
            filename: "bundle.js"
        },
        devtool: "source-map",
        resolve: {
            extensions: ["", ".tsx", ".ts", ".js"]
        },
        plugins: [
            new webpack.optimize.UglifyJsPlugin(),
            new HtmlWebpackPlugin({
                "filename": "./index.html",
                "template": "html!./index.html"
            })
        ],
        module: {
            loaders: [
            { test: /\.tsx?$/, loader: "ts-loader" },
            ]
        }
    }, 
    {
        output: {
            path: "./dist",
            filename: "bundle.js"
        },
        plugins: [
            new HtmlWebpackPlugin({
                "filename": "./index.html",
                "template": "html!./index.html"
            })
        ]    
    }
]

Кажется, он работает нормально, но скрипт bundle.js не внедряется в index.html, как ожидалось. HtmlWebpackPlugin должен делать это. Что я делаю неправильно?

Источник

2 ответа

Решение

Это похоже на проблему #234 WebpackHtmlPlugin.

С https://github.com/webpack/docs/wiki/configuration

output.publicPath PublicPath указывает общедоступный URL-адрес выходных файлов при обращении в браузере.

Что вы можете сделать, это добавить 'app' имя папки с выходным именем файла:

module.exports = {
  output: {
    filename: "app/[name]-[hash].js",
    path: "dist",
    publicPath: ""
  },
  plugins: [
    new HtmlWebpackPlugin({
       "template": "html!./index.html"
    }),
  ],
}
Источник

Плагин HTML Bundler для Webpack может читать файлы шаблонов в исходном каталоге и сохранять скомпилированные HTML-файлы с той же структурой в выходном каталоге.

Например, в исходном каталоге есть шаблоны:

      src/views/index.html
src/views/about/index.html
src/views/news/sport/index.html
src/views/news/sport/hockey/index.html
src/views/news/sport/football/index.html
...

Мы хотим иметь одинаковую структуру папок в каталоге:

      dist/index.html
dist/about/index.html
dist/news/sport/index.html
dist/news/sport/hockey/index.html
dist/news/sport/football/index.html
...

Просто установите плагин html-bundler-webpack-plugin:

      npm install html-bundler-webpack-plugin --save-dev

Добавьте плагин в конфиг Webpack:

      const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlBundlerPlugin({
      entry: 'src/views/', // the template directory
    }),
  ],
};

Все шаблоны изsrc/views/каталог будет скомпилирован и сохранен в папкеdist/каталог с той же структурой. Все исходные файлы сценариев и стилей, на которые есть ссылки в HTML, будут обработаны автоматически.

Источник
Другие вопросы по тегам