2016-12-19 40 views
2

我试图建立'的WebPack 2巴贝尔预设-ENV工作。巴贝尔预设-ENV不是的WebPack-DEV-服务器V2.2.0-rc.0

我有以下基础配置:

const config = require('./config'); 
const path = require('path'); 

module.exports = { 
    devtool: 'source-map', 
    performance: { 
     hints: false 
    }, 
    entry: [ 
     './src/index.js', 
    ], 
    output: { 
     path: path.join(__dirname, '../dist'), 
     publicPath: '/dist/', 
     filename: 'app.js' 
    }, 
    plugins: [], 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       loader: 'babel-loader', 
       exclude: ['/node_modules/'], 
       query: { 
        'presets': [['env', { 
         "modules": false, 
         "targets": { 
          "browsers": ["last 2 versions", "safari >= 7"] 
         } 
        }]], 
        'plugins': [], 
       }, 
      }, 
      //... 
     ], 
    }, 
} 

而下面PROD配置:

const base = require('./webpack.base'); 
const webpack = require('webpack'); 

base.plugins.push(
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
      warnings: true, 
     }, 
    }) 
); 

module.exports = base; 

而下面的开发配置:

const base = require('./webpack.base'); 
const webpack = require('webpack'); 

base.entry.push(
    'webpack/hot/dev-server', 
    'webpack-dev-server/client?http://localhost:4000' 
); 

base.plugins.push(
    new webpack.HotModuleReplacementPlugin() 
); 

module.exports = base; 

最后这里是我的dev服务器配置:

const dev = require('./webpack.dev'); 
const webpack = require('webpack'); 
const server = require('webpack-dev-server'); 
const path = require('path'); 

const compiler = webpack(dev); 

const instance = new server(compiler, { 
    hot: true, 
    filename: dev.output.filename, 
    publicPath: dev.output.publicPath, 
    stats: { 
     colors: true, 
    } 
}); 

instance.listen(4000, 'localhost',() => {}) 

我已经尝试添加inline: false并将contentBase设置为根据此post我的应用的绝对路径,都没有运气。

现在,当我与督促配置运行一切编译罚款,但是当我与dev的配置我碰到下面的错误运行:

ERROR in ./~/debug/browser.js 
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/home/otis/Developer/hassle/node_modules/debug"               
    at /home/otis/Developer/hassle/node_modules/babel-core/lib/transformation/file/options/option-manager.js:299:19                  
    at Array.map (native)                                        
    at OptionManager.resolvePresets (/home/otis/Developer/hassle/node_modules/babel-core/lib/transformation/file/options/option-manager.js:270:20)          
    at OptionManager.mergePresets (/home/otis/Developer/hassle/node_modules/babel-core/lib/transformation/file/options/option-manager.js:259:10)           
    at OptionManager.mergeOptions (/home/otis/Developer/hassle/node_modules/babel-core/lib/transformation/file/options/option-manager.js:244:14)           
    at OptionManager.init (/home/otis/Developer/hassle/node_modules/babel-core/lib/transformation/file/options/option-manager.js:374:12)             
    at File.initOptions (/home/otis/Developer/hassle/node_modules/babel-core/lib/transformation/file/index.js:216:65)                 
    at new File (/home/otis/Developer/hassle/node_modules/babel-core/lib/transformation/file/index.js:139:24)                   
    at Pipeline.transform (/home/otis/Developer/hassle/node_modules/babel-core/lib/transformation/pipeline.js:46:16)                  
    at transpile (/home/otis/Developer/hassle/node_modules/babel-loader/lib/index.js:38:20)                        
@ ./~/sockjs-client/lib/main.js 25:10-26                                    
@ ./~/sockjs-client/lib/entry.js                                      
@ (webpack)-dev-server/client/socket.js                                     
@ (webpack)-dev-server/client?http://localhost:4000                                  
@ multi main 

这里是我的package.json的副本,如果有帮助:

{ 
    "name": "hassle", 
    "version": "0.0.0", 
    "description": "Hassle an event organisation app", 
    "main": "index.js", 
    "scripts": { 
    "dev": "NODE_ENV=development node build/server.js", 
    "build": "NODE_ENV=production webpack --config build/webpack.prod.js", 
    "test": "echo 'lets implement'" 
    }, 
    "repository": { 
    "type": "git", 
    "url": "git+https://github.com/Shipwrecked/Hassle.git" 
    }, 
    "author": "Otis Wright", 
    "license": "MIT", 
    "bugs": { 
    "url": "https://github.com/Shipwrecked/Hassle/issues" 
    }, 
    "homepage": "https://github.com/Shipwrecked/Hassle#readme", 
    "dependencies": {}, 
    "devDependencies": { 
    "babel-core": "^6.2", 
    "babel-loader": "^6.2", 
    "babel-preset-env": "^1.0", 
    "css-loader": "^0.26", 
    "file-loader": "^0.9", 
    "node-sass": "^4.0", 
    "rimraf": "^2.5", 
    "sass-loader": "^4.1", 
    "style-loader": "^0.13", 
    "webpack": "^2.2.0-rc.1", 
    "webpack-dev-server": "^2.2.0-rc.0" 
    } 
} 
+0

你有'babelrc'吗? – CodingIntrigue

+0

不,但从我的理解我的webpack'babel-loader'的查询部分是处理设置我的'预设'它值得注意的是,这是所有工作之前,从'webpack-dev-server v2.1.0- beta.10“,没有'.babelrc'。 我不打扰更新如果它不是候选版本,但看到他们不应该从现在开始引入重大变化,这似乎是一个升级的好时机。 –

回答