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 из коробки!

804   7  

7 ответов:

1

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

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

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

2

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

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

3

через НПМ. Если вы запускаете свои команды через npm, то вы можете добавить настройка в свой пакет.json (проверьте также веб-пакет.конфиг.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

есть copy-webpack-plugin, как описано в этой Stackoverflow ответ

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

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

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

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

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

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

module.exports = {

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

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

}

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

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

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

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

Comments

    Ничего не найдено.