我正在尝试为我想要构建的网站设置Webpack配置。我想将SASS编译为CSS并将其放置到dist文件夹中。当我运行npm run build时，它工作正常，但当我运行npm run watch触发Webpack-dev-server时，它不会将index.js编译为weble.js，并且它不会出现在dist文件夹中。我的webpack.config.js是否有问题？
index.html
<html>
<head>
<title>Getting Started</title>
<link rel="stylesheet" href="dist/css/main.min.css">
</head>
<body>
test
<script src="dist/scripts/bundle.js"></script>
</body>
</html>字符串
webpack.config.js
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractSass = new ExtractTextPlugin({
filename: "../css/main.min.css",
disable: process.env.NODE_ENV === "development"
});
module.exports = {
entry: './src/scripts/index.js',
output: {
path: path.resolve(__dirname, 'dist/scripts'),
filename: 'bundle.js',
publicPath: 'dist/scripts'
},
module: {
rules: [
{
test: /\.scss$/,
use: extractSass.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
fallback: "style-loader"
})
}
]
},
plugins: [
extractSass
]
};型
package.json
{
"name": "project1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --optimize-minimize",
"watch": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.9",
"extract-text-webpack-plugin": "^3.0.2",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.2",
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.1"
},
"dependencies": {}
}型
5条答案
按热度按时间cotxawn71#
dev服务器具有writeToDisk选项
模块.exports = { //... devServer：{ writeToDisk：true } };
检查此：https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-
ebdffaop2#
webpack-dev-server从内存中提供服务。如果您想在使用webpack-dev-server进行开发期间查看磁盘上的文件，则需要同时运行标准webpack构建。有关详细信息，请参阅this answer。93ze6v8z3#
您可以查看webpack-dev-server生成的URL到这个URL中。
http://localhost:8080/webpack-dev-server（根据需要更改主机和端口）
webpack-dev-server不会将文件写入磁盘，但您可以在那里看到它们。
6ojccjat4#
您已经注意到dist/scripts没有更新。
就像其他人说的，webpack-dev-server只把它保存在内存中。
但你可以利用这一点
将以下内容添加到您的webpack.config.js：
字符串
publicPath：'/dist/scripts'
这就是魔力所在。
默认情况下，webpack-dev-server在
localhost:8080/（例如localhost:8080/bundle.js）上提供配置的输出.filename。我们改变了它，以便它提供
localhost:8080/dist/scripts/上的内容（例如localhost:8080/dist/scripts/bundle.js）。现在您的index.html将能够成功找到
<script src="dist/scripts/bundle.js"></script>。注意：你必须通过
localhost:8080访问你的index.html来完成这项工作。例如.从
file://...或不同的主机/端口访问将不起作用，因为它将在您的系统上查找实际文件（当然没有更新）。或者，如果你有
output: { filename: '/dist/scripts/bundles.js } }而不是output: { filename: 'bundles.js } }，那么publicPath将是不必要的。w8rqjzmb5#
要过滤掉 * 热模块替换 * 文件（例如
main.426e51f98113c94f78fa.hot-update.js），可以使用用途：字符串