Webpack开发服务器缓存清除

06odsfpq  于 2022-12-04  发布在  Webpack
关注(0)|答案(2)|浏览(279)

我无法让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

tyky79it

tyky79it1#

您可能没有在监视模式下运行webpack捆绑器(而不是webpack-dev-server
使用监视模式{ watch: true }并安装并发软件包
npm i-D并发
更新start脚本

{
    "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "dev:server": "webpack-dev-server",
    "start": "concurrently \"npm:dev\" \"npm:dev:server\""
  }
3hvapo4f

3hvapo4f2#

听起来你可能遇到了Webpack的缓存问题。一个解决方案是在输出配置对象中添加一个filename属性,其中包含一个唯一的哈希值,如下所示:

output: {
    path: path.join(__dirname, 'dist'),
    publicPath: "/",
    filename: 'js/index.[hash].js'
},

这将使Webpack在每次构建时为捆绑的JavaScript文件生成一个唯一的文件名,这将防止缓存问题。
另一个可能的解决方案是在运行webpack-dev-server时添加--no-cache标志,如下所示:

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production",
  "start": "webpack-dev-server --mode development --open --no-cache"
},

这将告诉webpack-dev-server不要缓存它生成的文件。

相关问题