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 из коробки!
7 ответов
1
в своем index.js
файл (т. е. запись webpack) добавьте требование к вашему index.html
via плагин, например:
require('file-loader?name=[name].[ext]!../index.html');
как только вы создадите свой проект с помощью webpack,index.html
будет в выходной папке.
2
использовать html-webpack-плагин чтобы избежать индекс.html вообще. Просто webpack создать файл для вас.
Я добавлю вариант ответа 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 включит его для вас (ну, после того, как вы правильно настроите его с помощью загрузчиков и, возможно, плагинов).
можно использовать CopyWebpackPlugin. Он работает так же, как это:
module.exports = {
plugins: [
new CopyWebpackPlugin([{
from: './*.html'
}])
]
}
Я бы сказал, Ответ: вы не можете. (или, по крайней мере: вы не должны). Это не то, что должен делать Webpack. Webpack-это bundler, и он не должен использоваться для других задач (в этом случае копирование статических файлов-другая задача). Вы должны использовать такой инструмент, как Grunt или Gulp для выполнения таких задач. Это очень распространено для интеграции Webpack как задача ворчания или задач залпом. У них есть другие задачи, полезные для копирования файлов, как вы описали, например, grunt-contrib-копировать или залпом-копия.
для других активов (не 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:
-
npm install --save-dev copyfiles
- на
package.json
У меня есть задача скопировать :"copy": "copyfiles -u 1 ./app/index.html ./deploy"
это переместить мой индекс.html из папки приложения в папку развертывания.
Я также нашел его легко и достаточно общими, чтобы поставить мой index.html
на dist/
каталог и добавить <script src='main.js'></script>
to index.html
чтобы включить мои связанные файлы webpack. main.js
кажется выходным именем по умолчанию нашего пакета, если в файл conf webpack. Я думаю, это не хорошее и долгосрочное решение, но я надеюсь, что это поможет понять, как webpack строительство.