TypeScript webpack.default方法代碼示例

export default (fixture, options = {}): Promise<webpack.Stats> => {
  const compiler: webpack.Compiler = webpack({
    context: __dirname,
    entry: `../${fixture}`,
    output: {
      path: path.resolve(__dirname),
      filename: 'bundle.js',
    },
    module: {
      rules: [{
        test: /\.graphql$/,
        use: [
          {
            loader: path.resolve(__dirname, 'fakeLoader.ts')
          },
          {
            loader: path.resolve(__dirname, '../../index.ts'),
            options
          }
        ]
      }]
    }
  });

  compiler.outputFileSystem = new MemoryFileSystem() as any;

  return new Promise((resolve, reject) => {
    compiler.run((err, stats) => {
      if (err || stats.hasErrors()) {
        return reject(err || new Error(`Webpack Error: ${stats.toJson().errors.join(', ')}`));
      }
      resolve(stats);
    });
  });
};

    .action((args, cb) => {
      let port = helper.isInt(args.options.port) ? parseInt(args.options.port, 10) : 4200;
      let config = getDevConfig();
      let cssConfig = getCSSConfig();
      
      config.entry.app.unshift(`webpack-dev-server/client?http://localhost:${port}/`);
      
      let compiler = webpack([config, cssConfig]);      

      server = new webserv(compiler, {
        contentBase: './src',
        quiet: true,
        historyApiFallback: true,
        watchOptions: {
          aggregateTimeout: 1000,
          poll: 100
        }
      });

      server.listen(port, () => {
        s.status = true;
        s.port = port;
        s.ui.log(chalk.yellow(`Server running at port ${port}`));
        open(`http://localhost:${port}`);
      });

      s.server = server;

      cb();
    })

  run: function(runTaskOptions: ServeTaskOptions) {

    var project = this.cliProject;

    rimraf.sync(path.resolve(project.root, runTaskOptions.outputPath));
    var config = new NgCliWebpackConfig(project, runTaskOptions.target, runTaskOptions.environment).config;
    const webpackCompiler = webpack(config);

    const ProgressPlugin  = require('webpack/lib/ProgressPlugin');

    webpackCompiler.apply(new ProgressPlugin({
      profile: true
    }));

    return new Promise((resolve, reject) => {
      webpackCompiler.run((err, stats) => {
        // Don't keep cache
        // TODO: Make conditional if using --watch
        webpackCompiler.purgeInputFileSystem();

        if(err) {
          lastHash = null;
          console.error(err.stack || err);
          if(err.details) console.error(err.details);
            reject(err.details);
        }

        if(stats.hash !== lastHash) {
          lastHash = stats.hash;
          process.stdout.write(stats.toString(webpackOutputOptions) + "\n");
        }
        resolve();
      });
    });
  }

function runWebpack(done) {
  // https://webpack.github.io/docs/webpack-dev-server.html
  let opts = {
    host: 'localhost',
    publicPath: config.output.publicPath,
    filename: config.output.filename,
    hot: project.platform.hmr || CLIOptions.hasFlag('hmr'),
    port: project.platform.port,
    contentBase: config.output.path,
    historyApiFallback: true,
    open: project.platform.open,
    stats: {
      colors: require('supports-color')
    },
    https: config.devServer.https
  } as any;

  if (project.platform.hmr || CLIOptions.hasFlag('hmr')) {
    config.plugins.push(new webpack.HotModuleReplacementPlugin());
    config.entry.app.unshift(`webpack-dev-server/client?http://${opts.host}:${opts.port}/`, 'webpack/hot/dev-server');
  }

  const compiler = webpack(config);
  let server = new Server(compiler, opts);

  // tslint:disable-next-line:only-arrow-functions
  server.listen(opts.port, opts.host, function(err) {
    if (err) { throw err; }

    reportWebpackReadiness(opts);
    done();
  });
}

    return new Observable(obs => {
      const devServerConfig = devServerCfg || webpackConfig.devServer || {};
      devServerConfig.host = devServerConfig.host || 'localhost';
      devServerConfig.port = devServerConfig.port || 8080;

      if (devServerConfig.stats) {
        webpackConfig.stats = devServerConfig.stats;
      }
      // Disable stats reporting by the devserver, we have our own logger.
      devServerConfig.stats = false;

      const webpackCompiler = webpack(webpackConfig);
      const server = new WebpackDevServer(webpackCompiler, devServerConfig);

      webpackCompiler.hooks.done.tap('build-webpack', (stats) => {
        // Log stats.
        loggingCb(stats, webpackConfig, this.context.logger);

        obs.next({ success: !stats.hasErrors() });
      });

      server.listen(
        devServerConfig.port,
        devServerConfig.host,
        (err) => {
          if (err) {
            obs.error(err);
          }
        },
      );

      // Teardown logic. Close the server when unsubscribed from.
      return () => server.close();
    });

 it("apply", (done) => {
     let isCalled = false;
     const fileChanger = new FileChanger({
         move: [{
             from: path.resolve(rootFolder, './assets', 'index.html'),
             to: './index.html',
             parameters: {
                 'app\\.min\\.js': 'app.0.[renderedHash:0].min.js'
             },
             before: (stats, move) => {
                 console.log("before moving");
             },
             after: (stats, move) => {
                 console.log("after moved")
             }
         }],
         complete: (stats) => {
             if (isCalled) {
                 done();
             }
             isCalled = true;
         }
     });
     const webpackConfig: any = new WebpackConfig();
     webpackConfig.plugins.push(fileChanger);
     webpack(webpackConfig, function () {
         rimraf(outFolder, fs, () => {
             if (isCalled) {
                 done();
             }
             isCalled = true;
         });
     });
 });

  return new Promise((resolve, reject) => {
    const compiler = webpack({
      ...webpackConfig,
      entry: filename,
      output: {
        ...webpackConfig.output,
        libraryTarget: "commonjs2",
        path: destDir,
        filename: name,
      },
    });

    compiler.outputFileSystem = fs;

    compiler.run((err) => {
      if (err) {
        reject(err);
      }

      const resultFilename = path.resolve(destDir, name);

      if (fs.existsSync(resultFilename)) {
        resolve(String(fs.readFileSync(resultFilename)));
      } else {
        resolve("");
      }
    });
  });

const createCompiler = (webpackConf): webpack.Compiler => {
  const compiler = webpack(webpackConf)
  compiler.hooks.invalid.tap('taroInvalid', filepath => {
    // console.log(chalk.grey(`[${formatTime()}]Modified: ${filepath}`))
    getServeSpinner().text = 'Compiling...'
    getServeSpinner().render()
  })
  compiler.hooks.done.tap('taroDone', stats => {
    const { errors, warnings } = formatWebpackMessage(stats.toJson(true))
    const isSuccess = !errors.length && !warnings.length
    if (isSuccess) {
      getServeSpinner().stopAndPersist({
        symbol: '✅ ',
        text: chalk.green('Compile successfully!\n')
      })
    }
    if (errors.length) {
      errors.splice(1)
      getServeSpinner().stopAndPersist({
        symbol: '🙅  ',
        text: chalk.red('Compile failed!\n')
      })
      console.log(errors.join('\n\n') + '\n')
    }
    if (warnings.length) {
      warnings.splice(1)
      getServeSpinner().stopAndPersist({
        symbol: '⚠️  ',
        text: chalk.yellow('Compile completes with warnings.\n')
      })
      console.log(warnings.join('\n\n') + '\n')
    }
  })
  return compiler
}

const addDevMiddlewares = (app: Express.Application, webpackConfig: Webpack.Configuration) => {
  const compiler = Webpack(webpackConfig);
  const middleware = WebpackDevMiddleware(compiler, {
    noInfo: true,
    publicPath: webpackConfig.output.publicPath,
    silent: true,
    stats: 'errors-only',
  });

  app.use(middleware);
  app.use(WebpackHotMiddleware(compiler));

  // Since webpackDevMiddleware uses memory-fs internally to store build
  // artifacts, we use it instead
  const fs = middleware.fileSystem;

  if (Pkg.dllPlugin) {
    app.get(/\.dll\.js$/, (req, res) => {
      const filename = req.path.replace(/^\//, '');
      res.sendFile(Path.join(process.cwd(), Pkg.dllPlugin.path, filename));
    });
  }

  app.get('*', (req, res) => {
    fs.readFile(Path.join(compiler.options.output.path, 'index.html'), (err, file) => {
      if (err) {
        res.sendStatus(404);
      } else {
        res.send(file.toString());
      }
    });
  });
};

> = (context: interfaces.Context) => (app?: express.Application) => {
  if (!app) {
    app = express();
  }
  context.container.get<interfaces.Factory<express.Application>>(
    registry.ExpressConfig
  )(app);
  useContainer(context.container);
  useExpressServer(app, {
    routePrefix: '/api',
    controllers: [
      CardSetController
    ],
    development: true,
    validation: { validationError: { target: false, value: false } }
  });
  app.use(historyApiFallback());
  app.use(
    webpackMiddleware(webpack(webpackDevConfig), {
      publicPath: '/',
      index: 'index.html',
      stats: {
        colors: true
      }
    })
  );
  context.container.get<interfaces.Factory<express.Application>>(
    registry.ExpressErrorConfig
  )(app);

  return app;
};