Javascript 设置Web包开发服务器的资产路径
弄清楚如何使用热重新加载设置webpack dev server,又浪费了一天的时间。我想在Javascript 设置Web包开发服务器的资产路径,javascript,webpack,webpack-dev-server,hot-reload,Javascript,Webpack,Webpack Dev Server,Hot Reload,弄清楚如何使用热重新加载设置webpack dev server,又浪费了一天的时间。我想在index.html中为我的JS和CSS资产提供以下路径:/dist/JS/app.min.JS和/dist/CSS/styles.min.CSS 我该如何配置webpack.config.js以在index.html中加载具有上述正确路径的资产?使用当前配置,webpack dev server仅在/dist文件夹中保存我的构建,在index.html中,我必须设置没有js或css文件夹的路径,例如:(
index.html
中为我的JS和CSS资产提供以下路径:/dist/JS/app.min.JS
和/dist/CSS/styles.min.CSS
我该如何配置webpack.config.js
以在index.html
中加载具有上述正确路径的资产?使用当前配置,webpack dev server仅在/dist
文件夹中保存我的构建,在index.html中,我必须设置没有js或css文件夹的路径,例如:(
)
My webpack.config.js:
const path = require('path');
const webpack = require('webpack');
module.exports = {
context: path.resolve(__dirname, './'),
entry: './src/app.js',
output: {
publicPath: '/dist/',
path: path.join(__dirname, '/dist/js'),
filename: 'app.min.js'
},
devServer: {
hot: true
},
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx']
},
module: {
rules: [
{
test: /\.(scss|sass|css)$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
};
我的项目结构:
您熟悉HtmlWebpackPlugin吗 这是我的设置:
new HtmlWebpackPlugin({
template: project.paths.client('index.html'), // absolute url to index.html
hash: false,
filename: 'index.html',
inject: 'body',
})
这将获取你的条目并将它们注入你的index.html我尝试了这个插件,但它将index.html放在dist/js文件夹中。若我编辑了index.html将被呈现的位置,那个么WebpackDevServer将为我的模板index.html提供服务。另一件事,当我想用ExtractTextWebpackPlugin为prod构建时,它不会添加任何CSS链接,所以我需要在index.html模板中指定该链接,但是webpack dev服务器将无法按预期工作。