web-dev-qa-db-ja.com

Webpack開発サーバーのキャッシュのクリア

Webpack開発サーバーを正しく動作させることができません。問題は、メモリ内で作成されたコンパイル済みコードがクリアされていないことだと思います。どこがいけないのかわからない。

私の設定ファイルは：

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を使用してdistファイルが作成されるとすぐに、webpack devサーバーが機能しなくなることです。たとえdistファイルを削除してもです。それを機能させる方法を私は単に知りません。どんな助けにも本当に感謝します。

ありがとう、R

webpackwebpack-dev-serverwebpack-4
7
Raph117

webpack bundler（not 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\""
  }
1
udeep shrestha