Question

在webpack中，当webpack处于监视模式时， CopyWebpackPlugin 会导致无限循环。我尝试添加 watchOptions.ignored 选项，但它似乎无法正常工作。我的webpack配置如下：

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const config = {

    entry: {
        'res': './src/index.js'
    },
    output: {
        filename: '[name].min.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            }
        ]
    },

    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production') 
        }),

        new CopyWebpackPlugin([
            { from: 'dist', to: path.resolve(__dirname, 'docs/js') }
        ], {})
    ],

    watchOptions: {
        ignored: path.resolve(__dirname, 'docs/js')
    }
};

module.exports = config;

任何帮助都将不胜感激。

Answer 1

使用CopyWebpackPlugin，我也经历了无限循环。我没有运气就尝试过各种CopyWebpackPlugin配置。在浪费了数小时之后，我发现可以挂入编译器并启动自己的复制方法。

跑步手表

我正在使用webpack watch来监视更改。在package.json中，我使用此配置，因此可以运行#include <iostream> #include <string> #include <fstream> #include <cstdlib> typedef unsigned char uchar ; typedef unsigned int uint ; using namespace std; const int img_size = 784; const int imgNum = 10; void readPGMImages( uchar images [img_size][imgNum], int img_size , const char * filename[imgNum], int imgNum ) { uint holder[img_size][imgNum]; int header; ifstream instream; for ( int i = 0; i < imgNum; i++){ instream.open(filename[i]); //this does not work if (instream.fail()){ cout << "failed to open" << endl; exit(1);} instream >> header >> header >> header >> header ; for (int j = 0; j < img_size ; j++){ instream >> holder[j][i]; holder[j][i] = static_cast<uchar>(holder[j][i]); images[j][i]=holder[j][i] ; //edited here cout << images[j][i] << endl; } instream.close() ; //edited here } } int main(int argc, const char * argv[]) { const char* filename[10] ={"digit_00.pgm","digit_01.pgm","digit_02.pgm","digit_03.pgm","digit_04.pgm","digit_05.pgm","digit_06.pgm","digit_07.pgm","digit_08.pgm","digit_09.pgm"}; //I believe I have a mistake above but I'm unsure uchar images[img_size][imgNum] ; readPGMImages(images, img_size , filename , imgNum); //this is where I call the function return 0; }，它将监视文件更改。

npm run webpackdev

我的解决方法

我添加了一个带有编译器挂钩的嵌入式插件，该插件可以插入AfterEmitPlugin。这使我可以在编译后生成源代码后进行复制。该方法非常适合将我的npm build输出复制到我的maven目标webapp文件夹中。

"webpackdev": "cross-env webpack --env.environment=development --env.basehref=/ --watch"

替代方法源

这里是我的webpack.config.js，用于更多上下文。（在此webpack配置中，我使用Sencha的Ext JS ExtWebComponents作为基础。）

// Inline custom plugin - will copy to the target web app folder
// 1. Run npm install fs-extra
// 2. Add fix the path, so that it copies to the server's build webapp folder
{
  apply: (compiler) => {
    compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
      // Debugging
      console.log("########-------------->>>>> Finished Ext JS Compile <<<<<------------#######");

      let source = __dirname + '/build/';
      // TODO Set the path to your webapp build
      let destination = __dirname + '/../dash-metrics-server/target/metrics-dash';

      let options = {
        overwrite: true
      };
      fs.copy(source, destination, options, err => {
        if (err) return console.error(err) {
            console.log('Copy build success!');
        }
      })
    });
  }
}

使用CopyWebpackPlugin的webpack监视模式会导致无限循环

1 个答案: