答案问题2(我的开发服务器不会自动刷新(
除了dist文件夹，我还有一个名为dev的文件夹。这个dev文件夹包含index.html文件。
我正在将index.html文件和dist文件夹中的css和js文件连接起来。
文件夹结构：
|-- dev
|-- index.html
|-- dist
|-- scroll.carousel.js
|-- scroll.carousel.css
|-- src
|-- js
|-- index.js
|-- other.js
|-- scss
|-- style.scss
Index.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link rel="stylesheet" href="../dist/scroll.carousel.css">
</head>
<body>
<h1>Hello world</h1>
<script src="../dist/scroll.carousel.js"></script>
</body>
</html>
我的问题：
- 当我运行dev-server时，我无法获得css样式
- 我的开发服务器不会自动刷新
每次在src文件夹中进行更改时，我都想刷新浏览器。
我的webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
module.exports = {
mode: "production",
target: 'web',
entry: {
["scroll.carousel"]: './src/js/index.js',
["scroll.carousel.style"]: './src/scss/style.scss',
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: "/",
clean: true
},
plugins: [
new RemoveEmptyScriptsPlugin(),
new MiniCssExtractPlugin({
filename: (pathData) => {
if (pathData.chunk.name.includes(".style")) {
return pathData.chunk.name.replace(".style", "") + ".css"
}
return '[name].css'
},
}),
],
module: {
rules: [
{
test: /.s[ac]ss$/i,
use: [
// Extract CSS
MiniCssExtractPlugin.loader,
// Translates CSS into CommonJS
{
loader: 'css-loader',
options: {
sourceMap: true,
url: false
}
},
// Compiles Sass to CSS
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
],
},
],
},
devtool: 'source-map',
devServer: {
static: {
directory: path.resolve(__dirname, 'dev'),
watch: true,
},
watchFiles: ["./src/**/*"],
open: true,
liveReload: true
},
};
澄清
首先，我很好奇你的文件夹结构是故意的还是初学者的错误。我将假设后者
-
答案问题1(当我运行dev-server时，我无法获得css样式(
首先，如何加载html？我没有看到任何HtmlWebpackPlugin或layoutloader。dist文件夹(仅当构建时生成的输出文件夹(应包括针对生产优化的index.html文件。目前，很明显，您的index.html文件应该位于/src中。对于要加载的样式，您首先需要样式加载器。请参阅此处。然后将你的主.scs文件导入到你的index.js文件中，webpack会自动加载你的css
watch: true可以省略，默认情况下启用。尝试将entry: { ["scroll.carousel"]: './src/js/index.js', ["scroll.carousel.style"]: './src/scss/style.scss', }更改为entry: { main: './src/js/index.js' },。此外，尝试将directory: path.resolve(__dirname, 'dev')更改为directory: path.join(__dirname, 'dev')有关webpack配置的更多信息，请参阅此处