使用 webpack-dev-server，我可以./dist/index.html在根路徑 ( 0.0.0.0:8080)加載并./dist/bundle.js在0.0.0.0:8080/bundle.js. 我嘗試加載 ( 0.0.0.0:8080/style.css)時收到 404 。
我的./dist目錄中的 CSS是由運行的 npm 命令生成的node-sass，而不是使用 webpack。
dist/
- index.html
- bundle.js
- style.css
webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.ts",
mode: "development",
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/,
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader, // instead of style-loader
'css-loader'
]
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
plugins: [
new MiniCssExtractPlugin(
{
filename: './style.css'
//also tried: path.resolve(__dirname, "dist", "style.css")
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "dist", "index.html"),
inject: false
})
],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
};
（來自https://blog.jakoblind.no/css-modules-webpack/）
我應該添加或更改什么，以便我的瀏覽器可以訪問 CSS 檔案./dist/style.css？
uj5u.com熱心網友回復：
webpack-dev-server實際上并不將檔案存盤在磁盤上，它只是動態生成它們，然后將它們保存在記憶體中以回應 http 請求。所以默認情況下，它不會知道dist; 它只知道如何/在哪里提供它也可以生成的檔案。
但是，您可以將其配置為從磁盤提供其他現有檔案（并觀察它們的更改），方法是將其添加到您的 webpack 配置中。在 Webpack 5 中：
devServer: {
static: {
directory: path.join(__dirname, 'dist')
}
}
在 Webpack 4 中，它被稱為contentBase：
devServer: {
contentBase: path.join(__dirname, 'dist'),
watchContentBase: true
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/314039.html