Как настроить сервер разработки Webpack для обслуживания определенной папки при запуске остальной части сайта через другой сервер?
Некоторый быстрый фон:
Сайт моей компании работает с CMS, а CMS обрабатывает всю маршрутизацию. Нет HTML-файлов, только бритвенные файлы (.cshtml). Хотя я предпочитаю делать сайт заново, это не вариант, поэтому я стараюсь постепенно модернизировать сайт, интегрируя vue.js с частичным рабочим процессом разработки веб-пакетов на страницу за страницей. основа.
Я потратил много времени на настройку веб-пакета таким образом, чтобы он мог обрабатывать файлы, находящиеся только в папке / dist /, - все остальное подается через http://my.server/ и обрабатывается CMS и бэкэндом.
Методом проб и ошибок мне удалось получить файлы, обслуживающие webpack-dev-server, в папке / dist /, в то же время позволяя остальной части сервера обслуживать все остальное (через http://my.server/). К сожалению, это ТОЛЬКО работает, когда пути к файлам для части webpack-dev-server специально ссылаются на " http://localhost:8080/", что явно недопустимо.
Код среды разработки должен точно соответствовать коду производственной среды, поэтому <script src="http://localhost:8080/dist/build.js"></script> это просто недопустимо.
Однако, если я просто напишу <script src="/dist/build.js"></script> сервер разрешает это <script src="http://my.server/dist/build.js"></script> что, очевидно, неверно и приводит к 404 (потому что эти файлы обслуживаются только с сервера разработки).
У меня вопрос: как мне настроить webpack-dev-server на то, чтобы он обслуживал все содержимое папки / dist / из себя, а все остальное на сайте можно было обслуживать через " http://my.server/"?
Вот мой файл webpack.config.js для справки:
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this nessessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
},
devServer: {
publicPath: '/dist/',
historyApiFallback: true,
noInfo: false,
proxy: [{
context: function(pathname, req) {
// exclude /src/ and /dist/
return !pathname.match("^/(src|dist)/");
},
target: {
"host": "my.server",
"protocol": 'http:',
"port": 80
},
ignorePath: false,
changeOrigin: true,
secure: false
}]
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
Хотя, вероятно, нет необходимости отвечать на этот вопрос, если вы хотите получить дополнительную информацию, моя первоначальная проблема (и решение этой проблемы) находятся здесь: Используя простую настройку vue.js / webpack, как настроить сервер dev для прокси всего За исключением нескольких файлов.js и.vue?
3 ответа
В основном это работает с приложением.NET. Он по-прежнему обслуживает файлы разработчиков из localhost:8080 но позаботится о том, чтобы модифицировать файлы шаблонов для вас во время разработки и настроить их обратно для производства. Не уверен, решит ли это вашу проблему полностью, но это работает для нас, и пока может помочь другим, поэтому я все равно оставлю это здесь.
В package.json У меня есть скрипт start (dev) и build (prod):
"start": "webpack --config webpack.dev.js && webpack-dev-server --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
webpack.prod.js просто устанавливает mode: "production" и сливается с webpack.config.js которая выполняет большую часть работы с веб-пакетами, включая внедрение файлов в.net _Layout_React.cshtml файл, включая сценарии производства из Scripts папка:
const HtmlWebPackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: {
main: './src/index.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
},
],
},
{
test: /\.scss$/,
use: [
'style-loader', // creates style nodes from JS strings
'css-loader', // translates CSS into CommonJS
'sass-loader', // compiles Sass to CSS, using Node Sass by default
],
},
],
},
plugins: [
new HtmlWebPackPlugin({
template: '../../../Views/Shared/_Layout_Template.cshtml',
filename: '../../Views/Shared/_Layout_React.cshtml',
}),
new webpack.HashedModuleIdsPlugin(),
],
output: {
path: path.resolve(__dirname, '../../../Scripts/React/'),
publicPath: '/Scripts/React/',
filename: '[name].[contenthash].production.js',
},
optimization: {
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all',
},
},
},
},
};
Когда я бегу npm run build это строит производство _Layout_React.cshtml Шаблон, который используется в приложении и включает в себя файлы из файловой системы. Тем не менее, когда я бегу npm start это меняет _Layout_React.cshtml шаблон для включения файлов из localhost:8080 где webpack-dev-server работает и обслуживает просматриваемые файлы из:
webpack.dev.js:
const merge = require('webpack-merge');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const webpack = require('webpack');
const baseConfig = require('./webpack.config.js');
module.exports = merge(baseConfig, {
mode: "development",
devtool: 'eval-source-map',
devServer: {
open: false,
},
output: {
filename: '[name].development.js',
publicPath: 'http://localhost:8080/dist/',
},
});
Теперь, когда я бегу npm start затем запустите приложение.NET, я получу приложение.NET на localhost:33401 но он получает это реагировать файлы из localhost:8080 и автоматически компилировать их при сохранении, и когда пришло время нажать на репо, я запускаю npm run build и он встраивает файлы в жесткие файлы в.NET Scripts папку и обновляет шаблон, чтобы отразить это.
Измените publicPath: '/dist/' в конфигурации веб-пакета, чтобы он соответствовал вашему фактическому пути к продукту, а затем измените сценарий SRC в index.html, чтобы он указывал на новый открытый путь... т.е. в основном виртуальный путь... Не обязательно присутствовать на реальной файловой системе.. я добился того же в моем проекте..
Думаю, что проблема вызвана использованием этого хоста: http://my.server вместо по умолчанию http://localhost:8080
Попробуйте запустить webpack-dev-server с флагом --host 0.0.0.0 а также --port 80
`--host <hostname/ip>`: hostname or IP. `0.0.0.0` binds to all hosts.