标签：javascript webpack vue-js webpack-dev-server http-proxy-middleware
一些快速背景：
我公司的网站运行CMS,CMS处理所有路由.没有html文件,只有剃刀文件(.cshtml).虽然从头开始重做网站是我更喜欢做的,但它不是一个选项,所以我试图通过逐页整合vue.js与webpack开发工作流程来逐步实现网站的现代化.基础.
我花了很多时间设置webpack,只允许它处理在/ dist /文件夹中找到的文件 – 其他一切都通过http://my.server/提供,并由CMS和后端处理.
通过试用和错误我设法在/ dist /文件夹中获取webpack-dev-server服务文件,同时允许服务器的其余部分提供其他所有服务(通过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
})
])
}
虽然可能没有必要回答这个问题,但如果您想要更多背景知识,我的初始问题(以及该问题的解决方案)就在这里：Using a simple vue.js/webpack setup, how does one configure the dev server to proxy everything EXCEPT a few .js and .vue files?
解决方法:
我主要使用.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只是设置模式：“生产”并与webpack.config.js合并,后者执行大部分webpack工作,包括将文件注入.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应用程序时,我在localhost上获得.NET应用程序：33401但它从localhost获取它的反应文件：8080并在保存时自动编译它们,当它需要时间推送到repo我运行npm运行构建,它将文件构建到.NET Scripts文件夹中的硬文件中,并更新模板以反映这一点.
标签：javascript,webpack,vue-js,webpack-dev-server,http-proxy-middleware 来源： https://codeday.me/bug/20190706/1392432.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。