问题描述
我有 webpack5 在 assets/ 中创建文件,我还想在其中存储几个静态文件,然后我希望 webpack-dev-server 将每个未由 webpack 或静态管理的请求代理到后端服务器。>
在生产中,所有资产都捆绑在 Go 服务器中,但在前端开发期间,我想将两者结合起来。
不幸的是,我无法让它为静态内容提供服务:-/你们能不能赐教一下?
// webpack/webpack.config.dev.js
const Path = require('path');
const Webpack = require('webpack');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
// extend webpack.common.js
module.exports = merge(common,{
mode: 'development',devtool: 'cheap-source-map',// webpack serve
devServer: {
inline: true,index: '',contentBase: Path.join(__dirname,'../assets'),host: process.env.HOST || '127.0.0.1',port: process.env.PORT,// backend
proxy: {
context: () => true,target: {
host: '127.0.0.1',port: process.env.BACKEND
}
}
}
});
// webpack/webpack.common.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
const Path = require('path');
const Webpack = require('webpack');
module.exports = {
entry: {
'js/index': Path.resolve(__dirname,'../src/js/index.js'),'css/index': Path.resolve(__dirname,'../src/scss/index.scss'),},output: {
path: Path.join(__dirname,filename: '[name].js',publicPath: '/',plugins: [
new RemoveEmptyScriptsPlugin(),new MiniCssExtractPlugin({
filename: '[name].css',}),],resolve: {
alias: {
'~': Path.resolve(__dirname,'../src')
},module: {
rules: [
{
test: /\.s?css$/,use: [MiniCssExtractPlugin.loader,'css-loader','postcss-loader','sass-loader'],}
整个项目可以在https://github.com/amery/go-webpack-starter.git
找到解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)