2017-12-01 1 views
0

안녕하세요 저는이 repo https://github.com/aepsilon을 설치하려고합니다. npm -no-bin-links, npm i webpack -g 및 기타 패키지를 실행했지만 웹 팩 구성 방법을 찾을 수 없습니다. 난이 오류가 발생했습니다 config.js 때문에 매번 내가 실행 NPM webpack-dev-server --progress --colors --display-error-details --host=0.0.0.0Webpack.config.js 구성

어떻게 내가 내 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 <[email protected]>", 
    "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

답변

0

변경 1.16.5-1.15.0웹팩-DEV-서버웹팩 버전. 에서

라인 npm install

이 그런 다음 튜링 기계를 즐길 수 loader: 'file', 실행

loader: 'file-loader',에 77의 변화를 webpack.config.js.

감사합니다.

+0

그것은 변경되지 않습니다. –

+0

npm install을 다시 실행했는데 오류가 있습니까? – Gearoid

+0

"npm start"를 실행하면이 오류가 발생합니다. webpack-dev-server --progress --colors --display-error-details --host = 0.0.0.0 –

관련 문제