Недавно я создавал реактивный проект на основе веб-пакета и столкнулся с
output.publicPathи в webpack-dev-сервереpublicPathПроблемы, и описание их в официальных документах не очень понятное, поэтому я исследовал и написал эту статью.
output
Опция вывода указывает расположение вывода веб-пакета, из которых часто используются наиболее важные.pathиpublicPath
output.path
- По умолчанию:
process.cwd()
output.pathПросто укажите каталог вывода, соответствующийабсолютный путь, например, в проекте обычно делается следующая конфигурация:
output: {
path: path.resolve(__dirname, '../dist'),
}
output.publicPath
- По умолчанию: пустая строка
Объяснение publicPath в официальной документациида
webpack предоставляет очень полезную конфигурацию, которая помогает указать базовый путь для всех ресурсов в вашем проекте, который называется publicPath.
И непонятно, как применить этот путь...
На самом деле базовый путь всех ресурсов, упомянутых здесь, относится к базовому пути, когда в проекте упоминаются ресурсы css, js, img и др. Этот базовый путь следует использовать в сочетании с путем, указанным в конкретном ресурсе, поэтому в Фактически, путь доступа к упакованному ресурсу может быть использован. Он выражается следующей формулой:
静态资源最终访问路径 = output.publicPath + 资源loader或插件等配置路径
Например
output.publicPath = '/dist/'
// image
options: {
name: 'img/[name].[ext]?[hash]'
}
// 最终图片的访问路径为
output.publicPath + 'img/[name].[ext]?[hash]' = '/dist/img/[name].[ext]?[hash]'
// js output.filename
output: {
filename: '[name].js'
}
// 最终js的访问路径为
output.publicPath + '[name].js' = '/dist/[name].js'
// extract-text-webpack-plugin css
new ExtractTextPlugin({
filename: 'style.[chunkhash].css'
})
// 最终css的访问路径为
output.publicPath + 'style.[chunkhash].css' = '/dist/style.[chunkhash].css'
Окончательный путь доступа к статическому ресурсу можно увидеть в html, упакованном с помощью html-webpack-plugin. такpublicPathПосле установки относительного пути относительный путь будет относиться к index.html после сборки, например, если установленоpublicPath: './dist/', ссылочный путь упакованного js./dist/main.js, но здесь есть проблема, относительный путь в порядке при доступе к локальному, но если статический ресурс размещен на CDN, путь доступа явно не может использовать относительный путь, но еслиpublicPathустановлен в/, путь доступа после упаковкиlocalhost:8080/dist/main.js, недоступно локально
Так что здесь вам нужно вручную изменить его, когда вы выходите в интернетpublicPath, это не очень удобно, но я не знаю, как это решить...
В целомpublicPath должен заканчиваться на '/', а другие конфигурации загрузчика или плагина не должны начинаться на '/'
PercingPath в WebPack-dev-сервере
Нажмите, чтобы просмотреть введение в devServer.publicPath в официальной документации.
На этапе разработки мы используем devServer для запуска сервера разработки для разработки, здесь же настраивается сервер разработки.publicPath,здесьpublicPathДоступ к упакованным файлам по указанному пути можно получить в браузере. в то время как статические ресурсы все еще используютсяoutput.publicPath.
Контент, упакованный webpack-dev-server, помещается в память, а внешний корневой каталог этих упакованных ресурсовpublicPath, другими словами, здесь мы задаем место, где хранятся упакованные ресурсы
Например:
// 假设devServer的publicPath为
const publicPath = '/dist/'
// 则启动devServer后index.html的位置为
const htmlPath = `${pablicPath}index.html`
// 包的位置
cosnt mainJsPath = `${pablicPath}main.js`
Вышеупомянутое может быть напрямую передано черезhttp://lcoalhost:8080/dist/main.jsдоступ к.
посетивhttp://localhost:8080/webpack-dev-serverВы можете получить путь доступа к ресурсу после запуска devServer, как показано на рисунке, нажмите на статический ресурс, чтобы увидеть, что путь доступа к статическому ресурсуhttp://localhost:8080${publicPath}index.html
html-webpack-plugin
Этот плагин используется для добавления css и js в html-шаблоны, гдеtemplateиfilenameБудет затронут путь, как видно из исходного кода
template
Роль: используется для определения пути к файлу шаблона.
Исходный код:
this.options.template = this.getFullTemplatePath(this.options.template, compiler.context);
следовательноtemplateОпределено только в веб-пакетеcontextбудет распознан ниже.Значение контекста веб-пакета по умолчанию:process.cwd(), который представляет собой абсолютный путь к папке, в которой была запущена команда node.
filename
Функция: имя выходного HTML-файла, по умолчанию — index.html, которое можно напрямую настроить с подкаталогами.
Исходный код:
this.options.filename = path.relative(compiler.options.output.path, filename);
Таким образом, путь к имени файла относительноoutput.path, а в webpack-dev-server настраивается относительно webpack-dev-serverpublicPath.
Если webpack-dev-серверpublicPathиoutput.publicPathНепоследовательно, использование html-webpack-plugin может привести к сбою ссылки на статические ресурсы, поскольку devServer по-прежнему заканчиваетсяoutput.publicPathСсылка на статические ресурсы не соответствует пути доступа к ресурсу, предоставленному webpack-dev-server, поэтому к нему невозможно получить доступ в обычном режиме.
Есть одно исключение, т.
output.publicPathэто относительный путь, вы можете получить доступ к локальным ресурсам в это время
Так что в целом необходимо убедиться, что devServer вpublicPathиoutput.publicPathбыть последовательным.
Наконец
О вебпакеpathПодводя итог, в процессе изучения путей веб-пакетов я увидел некоторые фрагментарные знания о путях:
косая черта/значение
в конфигурации/Представляет корневой путь URL, напримерhttp://localhost:8080/dist/js/test.jsсерединаhttp://localhost:8080/
devServer.publicPath & devServer.contentBase
- devServer.contentBase сообщает серверу, откуда обслуживать контент. Требуется только в том случае, если вы хотите обслуживать статические файлы.
- devServer.publicPath будет использоваться для определения того, откуда должен обслуживаться пакет, и этот параметр имеет приоритет.
путь в узле
-
__dirname: всегда возвращает абсолютный путь к папке, в которой находится исполняемый js -
__filename: всегда возвращает абсолютный путь к выполненному js -
process.cwd(): всегда возвращает абсолютный путь к папке, в которой была запущена команда node.