Question

我正在构建一个Web应用程序，它还将包含一个使用PhaserJS构建的游戏。对于用户界面，我使用的是Angular Material。作为前端框架，我使用AngularJS 1.5。我的问题是我已经开始在Mac上实现这个应用程序，我的设置工作正常。但是，现在我必须继续使用Windows桌面，copy-webpack-plugin似乎不再起作用了。如果我运行我的生产构建它看起来很好，意味着插件将文件复制到lib文件夹。现在，如果我启动dev-server，文件就会丢失。我复制这些文件的原因是我不想重新编译它们，因为如果我这样做，我的构建需要永远（差不多3分钟）。此外，Phaser还预先构建了包含PIXI和p2的内容，我也不想要这两个。

有什么问题？是否有其他方法可以使用静态文件，例如phaser.min.js和angular-material.min.css，以便只复制这些文件并将其包含在index.html中？你会如何处理这种情况？

这是我的webpack.config.js：

var path = require('path'),
    webpack = require('webpack'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    CopyWebpackPlugin = require('copy-webpack-plugin'),
    ExtractTextPlugin = require('extract-text-webpack-plugin');

var node_modules = path.join(__dirname, 'node_modules');
var src = path.join(__dirname, 'src');
var app = path.join(src, 'app');
var dist = path.join(__dirname, 'dist');
var lib = path.join(__dirname, 'lib');

var vendors = [];

// Vendor scripts
var libs = [{
  name: 'phaser',
  path: path.join(node_modules, 'phaser/build/phaser.min.js')
}, {
  name: 'angular-material',
  path: path.join(node_modules, 'angular-material/angular-material.min.css')
}];

// Include all vendor scripts
libs.forEach(function (vendor) {
  vendors.push({
    from: vendor.path,
    to: path.join(lib, vendor.name)
  });
});

module.exports = {
  entry: {
    'app': path.join(app, 'app.ts'),
    'vendor': path.join(app, 'vendor.ts')
  },
  output: {
    path: dist,
    filename: '[name]-[hash:6].js',
    publicPath: './'
  },
  devServer: {
    contentBase: src
  },
  devtool: 'eval',
  module: {
    loaders: [{
        test: /\.ts$/,
        loader: 'ng-annotate?add=true!ts',
        exclude: [
          /node_modules/
        ]
      }, {
        test: /\.json/,
        loader: 'json'
      }, {
        test: /\.html$/,
        loader: 'raw'
      }, {
        test: /\.css$/,
        loader: "style!css"
      }, {
        name: 'styles',
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract("style",
          "css?sourceMap!autoprefixer?browsers=last 2 versions!sass?sourceMap"),
        exclude: [
          /node_modules/
        ]
      }, {
        test: /\.(png|jpe?g|gif|svg)$/,
        loader: 'file?name=images/[name].[ext]'
      }
    ]
  },
  resolve: {
    extensions: ['', '.ts', '.js', '.html', '.scss']
  },
  plugins: [
    new CopyWebpackPlugin(vendors),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: '[name].js',
      minChunks: Infinity
    }),
    new ExtractTextPlugin('[name].css'),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.join(src, 'index.html'),
      inject: 'body'
    })]
};

Answer 1

问题是你的插件copy-webpack-plugin

https://github.com/kevlened/copy-webpack-plugin/issues/26

尝试将其降级为版本1.0，看起来这就是问题所在。他们必须在最新版本中意外地执行某些特定于Mac的CLI命令。

如何在不需要使用Webpack

1 个答案: