Процесс сборки и развертывания Webpack

Question

Я только что начал использовать Webpack через рекомендацию, и я ищу несколько рекомендаций относительно того, как это должно быть реализовано для целей сборки и развертывания.

В настоящее время я использую webpack-dev-server и некоторые задачи Gulp.

Традиционно я использовал Gulp или Grunt для совместного использования файлов, а затем использовал бегун задачи, чтобы скопировать все мои файлы и активы в каталог dist или build, из которого я бы развернул все.

В тот же момент Webpack делает это и строит файл пакета, изображения и т. Д., А затем копирует их в каталог сборки, используя соглашение о присвоении имен [hash] .js.

Итак, мой вопрос в том, какова стандартная практика для копирования этого файла index.html, а затем правильная привязка его к файлу js, который будет использоваться в процессе производства.

Если я полностью не понимаю, как использовать Webpack, не должно быть для меня каким-то образом, и конечный результат заключается в том, что у меня есть возможность перейти к дереву сборки и посмотреть, как мое приложение работает и работает как должен быть?

Answer 1

В настоящее время я использую плагин для перемещения моего index.html. Убедитесь, что ваш webpack.output.publicPath указывает на ваш сайт, чтобы он мог связывать изображения и другие ресурсы.

var CopyWebpackPlugin = require('copy-webpack-plugin'); 

var webpack_config = { 

    //Other configs here 

    output: { 
     publicPath: 'http://localhost/' 
    }, 

    //Other configs here 

    plugins:[ 
     new CopyWebpackPlugin([ 
       {from: './index.html', to: './index.html'}, 
      ], { 
       ignore: [ 
        '*.txt', 
        {glob: '**/*', dot: true} 
       ] 
      }) 
    ], 

    //Other configs here 

}