Webpack.config.js配置

Question

你好，我正在尝试安装这个回购https://github.com/aepsilon，我运行了npm i--无bin链接，npm i webpack -g和其他包，但是我找不到如何配置我的webpack.config.js，因为我每次运行npm webpack-dev-server --progress --colors --display-error-details --host=0.0.0.0时都会遇到这个错误。

如何配置我的webpack.config.js https://github.com/webpack/webpack-dev-server/issues/183

这是我的webpack.config.js和package.json

'use strict';
/* eslint-env node, es6 */
const path = require('path');
const webpack = require('webpack');


/////////////
// Utility //
/////////////

/**
 * Recursively merges two webpack configs.
 * Concatenates arrays, and throws an error for other conflicting values.
 */
function merge(x, y) {
  if (x == null) { return y; }
  if (y == null) { return x; }

  if (x instanceof Array && y instanceof Array) {
    return x.concat(y);
  } else if (Object.getPrototypeOf(x) === Object.prototype &&
             Object.getPrototypeOf(y) === Object.prototype) {
    // for safety, only plain objects are merged
    let result = {};
    (new Set(Object.keys(x).concat(Object.keys(y)))).forEach(function (key) {
      result[key] = merge(x[key], y[key]);
    });
    return result;
  } else {
    throw new Error(`cannot merge conflicting values:\n\t${x}\n\t${y}`);
  }
}


/////////////////
// Base Config //
/////////////////

const srcRoot = './src/';

const commonConfig = {
  entry: {
    TMViz: [srcRoot + 'TMViz.js'],
    main: srcRoot + 'main.js'
  },
  output: {
    library: '[name]',
    libraryTarget: 'var', // allow console interaction
    path: path.join(__dirname, 'build'),
    publicPath: '/build/',
    filename: '[name].bundle.js'
  },
  externals: {
    'ace-builds/src-min-noconflict': 'ace',
    'bluebird': 'Promise',
    'clipboard': 'Clipboard',
    'd3': 'd3',
    'jquery': 'jQuery',
    'js-yaml': 'jsyaml',
    'lodash': 'lodash',
    'lodash/fp': '_'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      // Note on ordering:
      // Each "commons chunk" takes modules shared with any previous chunks,
      // including other commons. Later commons therefore contain the fewest dependencies.
      // For clarity, reverse this to be consistent with browser include order.
      // names: ['util', 'TuringMachine', 'TapeViz', 'StateViz'].reverse()
      names: ['TMViz'].reverse()
    })
  ],
  module: {
    loaders: [
      // copy files verbatim
      { test: /\.css$/,
        loader: 'file',
        query: {
          name: '[path][name].[ext]',
          context: srcRoot
        }
      }
    ]
  }
};


//////////////////////
// Dev/Prod Configs //
//////////////////////

const devConfig = {
  output: {pathinfo: true}
};

const prodConfig = {
  devtool: 'source-map', // for the curious
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(true),
    new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}})
  ]
};

const isProduction = (process.env.NODE_ENV === 'production');

module.exports = merge(commonConfig, isProduction ? prodConfig : devConfig);

我的package.json

{
  "name": "turing-machine-viz",
  "version": "1.0.0",
  "description": "Turing machine visualization and simulator",
  "homepage": "http://turingmachine.io",
  "license": "BSD-3-Clause",
  "author": "Andy Li <andy.srs.li@gmail.com>",
  "repository": "aepsilon/turing-machine-viz",
  "scripts": {
    "clean": "trash build/ || rm -r build/",
    "depgraph": "mkdir -p build/ && (cd src/ && madge . --dot) > build/depgraph.gv",
    "depgraph-noext": "mkdir -p build/ && (cd src/ && madge . --dot -x \"`node -e \"console.log(Object.keys(require('../webpack.config').externals).map(s => '^'+s+'$').join('|'))\"`\") > build/depgraph-noext.gv",
    "lint": "eslint --cache webpack.config.js src/",
    "prod": "export NODE_ENV=production; npm run lint && webpack --progress --colors --display-error-details",
    "start": "webpack-dev-server --progress --colors --display-error-details --host=0.0.0.0",
    "watch": "webpack --watch --progress --colors --display-error-details"
  },
  "dependencies": {
    "webpack-dev-server": "^2.9.5"
  },
  "devDependencies": {
    "eslint": "^3.0.0",
    "file-loader": "^0.8.5",
    "raw-loader": "^0.5.1",
    "webpack": "^1.12.9"
  }
}

https://imgur.com/a/qdP18

Answer 1

将webpack版本改为1.15.0，webpack-dev-server改为1.16.5。

在webpack.config.js行77中，将loader: 'file',更改为loader: 'file-loader',

运行npm install

那就好好享受你的图灵机吧。

谢谢