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

Question

Я пытаюсь автоматизировать активы, входящие в/dist. У меня есть следующий config.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. Как я могу это сделать?

UPDATE 1 2017_____________

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

Answer 1

Вариант 1

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

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

После того, как вы строите свой проект с WebPack, index.html будет в выходной папке.

Вариант 2

Используйте html-webpack-plugin, чтобы избежать необходимости в index.html вообще. Просто попробуйте webpack создать файл для вас.

Answer 2

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

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

Answer 3

я добавлю опцию ответа VitalyB в:

Вариант 3

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

"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" 
    } 

Update: Вариант 4

Существует copy-webpack-plugin, как описано в этом Stackoverflow answer

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

Answer 4

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

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

Answer 5

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

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

Это пошевелить index.html из папки приложения в папку развертывания.

Answer 6

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

module.exports = { 

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

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

}