Webpack 网页包开发服务器不支持';从HTML网页包插件中提取生成的HTML文件
我想为我的react应用程序创建一个简单的开发环境。我使用Webpack 网页包开发服务器不支持';从HTML网页包插件中提取生成的HTML文件,webpack,webpack-dev-server,html-webpack-plugin,Webpack,Webpack Dev Server,Html Webpack Plugin,我想为我的react应用程序创建一个简单的开发环境。我使用网页包开发服务器和html网页包插件。我知道webpack dev server不写文件,只从内存提供服务。当输出文件位于同一目录中时,它可以完美地工作,但问题是,我希望资产位于/dist文件夹中,而不是位于生成的index.html所在的/根文件夹中 以下是我试图实现的目标的视觉表现: - public - dist * app.js * index.html - webpack * dev.config.js 以
网页包开发服务器
和html网页包插件
。我知道webpack dev server
不写文件,只从内存提供服务。当输出文件位于同一目录中时,它可以完美地工作,但问题是,我希望资产位于/dist
文件夹中,而不是位于生成的index.html
所在的/
根文件夹中
以下是我试图实现的目标的视觉表现:
- public
- dist
* app.js
* index.html
- webpack
* dev.config.js
以下是我对相同目录模式的配置:
// webpack/dev.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const assetsPath = path.resolve(__dirname, '../public');
module.exports = {
mode: 'development',
entry: {
app: './src/index.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: assetsPath
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin()
],
output: {
path: assetsPath,
filename: '[name]-[hash].js',
publicPath: '/'
}
};
// webpack/dev.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const assetsPath = path.resolve(__dirname, '../public/dist');
const publicPath = path.resolve(__dirname, '../public');
module.exports = {
mode: 'development',
entry: {
app: './src/index.js'
},
output: {
path: assetsPath,
filename: '[name]-[hash].js',
publicPath: '/dist'
},
devtool: 'inline-source-map',
devServer: {
contentBase: publicPath,
publicPath: '/dist'
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename: '../index.html'
})
]
};
下面是我对不同目录模式的尝试:
// webpack/dev.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const assetsPath = path.resolve(__dirname, '../public');
module.exports = {
mode: 'development',
entry: {
app: './src/index.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: assetsPath
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin()
],
output: {
path: assetsPath,
filename: '[name]-[hash].js',
publicPath: '/'
}
};
// webpack/dev.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const assetsPath = path.resolve(__dirname, '../public/dist');
const publicPath = path.resolve(__dirname, '../public');
module.exports = {
mode: 'development',
entry: {
app: './src/index.js'
},
output: {
path: assetsPath,
filename: '[name]-[hash].js',
publicPath: '/dist'
},
devtool: 'inline-source-map',
devServer: {
contentBase: publicPath,
publicPath: '/dist'
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename: '../index.html'
})
]
};
我尝试的配置有效,它会打开一个新的浏览器选项卡,但不包含我期望的内容。它仅显示带有/public/dist
的/public
文件夹的目录列表,该目录为空且为预期目录,因为开发服务器不写入任何文件
有人知道我怎么解决这个问题吗