我无法让webpack dev服务器正常工作。我认为问题是它在内存中编译的代码没有清除。我不知道我哪里出错了。
我的配置文件是:
var path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['babel-polyfill', './src/js/index.js'],
output: {
path: path.join(__dirname, 'dist'),
publicPath: "/",
filename: 'js/index.js'
},
devServer: {
contentBase: '/dist'
},
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader']
},
{
test: /\.scss$/,
use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/styles.css',
}),
new HtmlWebpackPlugin({
inject: false,
hash: true,
template: './src/index.html',
filename: 'index.html'
})
]
}
还有我的剧本:
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
},
我想要的是webpack dev服务器允许我在工作时实时重载,然后使用build来编译我的代码。问题是,一旦我使用dev或build,并且我的dist文件被创建,webpack dev服务器就停止工作了--即使我删除了dist文件。我只是不知道如何让它工作。真的很感激任何帮助。
谢谢,R
2条答案
按热度按时间tyky79it1#
您可能没有在监视模式下运行webpack捆绑器(而不是webpack-dev-server)
使用监视模式
{ watch: true }
并安装并发软件包npm i-D并发
更新
start
脚本3hvapo4f2#
听起来你可能遇到了Webpack的缓存问题。一个解决方案是在输出配置对象中添加一个
filename
属性,其中包含一个唯一的哈希值,如下所示:这将使Webpack在每次构建时为捆绑的JavaScript文件生成一个唯一的文件名,这将防止缓存问题。
另一个可能的解决方案是在运行webpack-dev-server时添加--no-cache标志,如下所示:
这将告诉webpack-dev-server不要缓存它生成的文件。