Webpack.config как просто скопировать индекс.html в папку dist

Я пытаюсь автоматизировать активы, входящие в /dist. У меня есть следующая конфигурация.js:

module.exports = {
  context: __dirname + "/lib",
  entry: {
    main: [
      "./baa.ts"
    ]
  },
  output: {
    path: __dirname + "/dist",
    filename: "foo.js"
  },
  devtool: "source-map",
  module: {
    loaders: [
      {
        test: /.ts$/,
        loader: 'awesome-typescript-loader'
      },
      { test: /.css$/, loader: "style-loader!css-loader" }
    ]
  },
  resolve: {
    // you can now require('file') instead of require('file.js')
    extensions: ['', '.js', '.json']
  }
}

Я также хочу включить main.html из каталога, который находится рядом с /lib, в папку /dist при запуске webpack. Как я могу это сделать?

обновить 1 2017_____________

мой любимый способ сделать это сейчас-это использовать html-webpack-plugin с файлом шаблона. Спасибо принятому ответу тоже! Преимущество этого способа заключается в том, что индексный файл также будет добавлена ссылка cachbusted js из коробки!

149
webpack

7 ответов

1

в своем index.js файл (т. е. запись webpack) добавьте требование к вашему index.html via плагин, например:

require('file-loader?name=[name].[ext]!../index.html');

как только вы создадите свой проект с помощью webpack,index.html будет в выходной папке.

2

использовать html-webpack-плагин чтобы избежать индекс.html вообще. Просто webpack создать файл для вас.

133

Я добавлю вариант ответа VitalyB это:

3

через НПМ. Если вы запускаете свои команды через npm, вы можете добавить настройка в свой пакет.json (проверьте также webpack.конфиг.js там тоже). Для разработки запуска npm start, нет необходимости копировать индекс.html в этом случае, потому что веб-сервер будет запущен из каталога исходных файлов и пакета.js будет доступен из того же места (комплект.js будет жить в только память, но будет доступна, как если бы она была расположена вместе с индексом.формат HTML.) Для запуска производства npm run build и папка dist будет содержать ваш пакет.js и индекс.html копируется с помощью старой доброй CP-команды, как вы можете видеть ниже:

"scripts": {
    "test": "NODE_ENV=test karma start",
    "start": "node node_modules/.bin/webpack-dev-server --content-base app",
    "build": "NODE_ENV=production node node_modules/.bin/webpack && cp app/index.html dist/index.html"
  }

Обновление: Вариант 4

есть копировать-webpack-плагин, как описано в этой Stackoverflow ответ

но в целом, за исключением самого "первого" файла (например, index.формат html) и большие активы (например, большие изображения или видео), включают css, html, изображения и так далее прямо в вашем приложении через require и webpack включит его для вас (ну, после того, как вы правильно настроите его с помощью загрузчиков и, возможно, плагинов).

52

можно использовать CopyWebpackPlugin. Он работает так же, как это:

module.exports = {
  plugins: [
    new CopyWebpackPlugin([{
      from: './*.html'
    }])
  ]
}
21

Я бы сказал, Ответ: вы не можете. (или, по крайней мере: вы не должны). Это не то, что должен делать Webpack. Webpack-это bundler, и он не должен использоваться для других задач (в этом случае копирование статических файлов-другая задача). Вы должны использовать такой инструмент, как Grunt или Gulp для выполнения таких задач. Это очень распространено для интеграции Webpack как задача ворчания или задач залпом. У них есть другие задачи, полезные для копирования файлов, как вы описали, например, grunt-contrib-копировать или залпом-копия.

для других активов (не index.html), вы можете просто связать их с Webpack (это именно то, что Webpack для). Например, var image = require('assets/my_image.png');. Но я предполагаю, что ваш index.html должен быть частью пакета, и поэтому это не работа для упаковщика.

13

вы можете добавить индекс непосредственно в свою конфигурацию записи и с помощью загрузчика файлов загрузить его

module.exports = {

  entry: [
    __dirname + "/index.html",
    .. other js files here
  ],

  module: {
    rules: [
      {
        test: /\.html/, 
        loader: 'file-loader?name=[name].[ext]', 
      },
      .. other loaders
    ]
  }

}
7

Это хорошо работает на Windows:

  1. npm install --save-dev copyfiles
  2. на package.json У меня есть задача скопировать : "copy": "copyfiles -u 1 ./app/index.html ./deploy"

это переместить мой индекс.html из папки приложения в папку развертывания.

3

Я также нашел его легко и достаточно общими, чтобы поставить мой index.html на dist/ каталог и добавить <script src='main.js'></script> to index.html чтобы включить мои связанные файлы webpack. main.js кажется выходным именем по умолчанию нашего пакета, если в файл conf webpack. Я думаю, это не хорошее и долгосрочное решение, но я надеюсь, что это поможет понять, как webpack строительство.

-1