通过弄清楚如何设置webpack-dev-server with hot reload ,又失去了一天 . 我想在 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文件夹的路径,例如:( <script src="/dist/app.min.js" />
) .
我的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()
]
};
我的项目结构:
1 回答
你熟悉HtmlWebpackPlugin吗? https://webpack.js.org/plugins/html-webpack-plugin/#src/components/Sidebar/Sidebar.jsx
这是我的设置:
这会将您的条目录入并将其注入index.html