2016-06-09 41 views
0

使用我當前的節點和webpack配置,我可以運行開發服務器並開發我的應用程序。如何構建用於部署的靜態文件

但是,我無法創建靜態bundle.js,我可以在我的網站上進行部署。

如何配置我的webpack.js文件和package.json命令以使其生成所需的捆綁文件?

當我運行NPM的身材,什麼都不會發生 當我運行NPM部署,我收到以下錯誤信息:

Usage: npm <command> 

where <command> is one of: 
    access, add-user, adduser, apihelp, author, bin, bugs, c, 
    cache, completion, config, ddp, dedupe, deprecate, dist-tag, 
    dist-tags, docs, edit, explore, faq, find, find-dupes, get, 
    help, help-search, home, i, info, init, install, issues, la, 
    link, list, ll, ln, login, logout, ls, outdated, owner, 
    pack, ping, prefix, prune, publish, r, rb, rebuild, remove, 
    repo, restart, rm, root, run-script, s, se, search, set, 
    show, shrinkwrap, star, stars, start, stop, t, tag, team, 
    test, tst, un, uninstall, unlink, unpublish, unstar, up, 
    update, upgrade, v, verison, version, view, whoami 

npm <cmd> -h  quick help on <cmd> 
npm -l   display full usage info 
npm faq   commonly asked questions 
npm help <term> search for help on <term> 
npm help npm  involved overview 

Specify configs in the ini-formatted file: 
    C:\Users\Sébastien\.npmrc 
or on the command line via: npm <command> --key value 
Config info can be viewed via: npm help config 

以下是我的配置:

的package.json

{ 
    "license": "UNLICENSED", 
    "private": true, 
    "version": "1.0.0", 
    "webPath": "web/", 
    "nodePath": "node_modules/", 
    "devDependencies": { 
    "autoprefixer": "^6.3.1", 
    "exports-loader": "^0.6.2", 
    "grunt": "^0.4.5", 
    "grunt-autoprefixer": "^3.0.3", 
    "grunt-contrib-concat": "^0.5.1", 
    "grunt-contrib-cssmin": "^0.14.0", 
    "grunt-contrib-less": "^1.1.0", 
    "grunt-contrib-uglify": "^0.11.0", 
    "grunt-contrib-watch": "^0.6.1", 
    "grunt-css-url-rewrite": "^0.3.5", 
    "grunt-cssjoin": "^0.3.0", 
    "grunt-postcss": "^0.7.1", 
    "imports-loader": "^0.6.5", 
    "matchdep": "^1.0.0", 
    "redux-devtools": "^3.0.2", 
    "redux-devtools-dock-monitor": "^1.0.1", 
    "redux-devtools-log-monitor": "^1.0.4", 
    "webpack-shell-plugin": "^0.4.2" 
    }, 
    "repository": { 
    "type": "git", 
    "url": "" 
    }, 
    "dependencies": { 
    "babel-core": "^6.4.0", 
    "babel-loader": "^6.2.1", 
    "babel-plugin-transform-runtime": "^6.4.3", 
    "babel-polyfill": "^6.3.14", 
    "babel-preset-es2015": "^6.3.13", 
    "babel-preset-react": "^6.3.13", 
    "babel-preset-stage-0": "^6.3.13", 
    "babel-runtime": "^6.3.19", 
    "grunt-postcss": "^0.7.1", 
    "history": "^1.17.0", 
    "i18next": "^2.5.1", 
    "isomorphic-fetch": "^2.2.1", 
    "lodash": "^4.11.1", 
    "radium": "^0.16.2", 
    "rc-switch": "^1.4.2", 
    "react": "^0.14.6", 
    "react-dom": "^0.14.6", 
    "react-hot-loader": "^1.3.0", 
    "react-redux": "^4.1.2", 
    "react-router": "^1.0.3", 
    "react-router-redux": "^3.0.0", 
    "redux": "^3.1.6", 
    "redux-thunk": "^2.1.0", 
    "selfupdate": "^1.1.0", 
    "webpack": "^1.12.11", 
    "webpack-dev-server": "^1.14.1", 
    "whatwg-fetch": "^0.11.0" 
    }, 
    "scripts": { 
    "start": "node webpack.dev-server.js", 
    "build": "webpack", 
    "deploy": "NODE_ENV=production webpack -p --config webpack.production.config.js" 
    } 
} 

webpack.config.js

var path = require('path'); 
var webpack = require('webpack'); 
var node_modules_dir = path.join(__dirname, 'node_modules'); 

var devFlagPlugin = new webpack.DefinePlugin({ 
    __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false')) 
}); 

console.log(__dirname); 

var config = { 
    entry: [ 
     'babel-polyfill', 
     'webpack-dev-server/client?http://127.0.0.1:3000', 
     'webpack/hot/only-dev-server', 
     './app/Resources/react/app.js' 
    ], 
    output: { 
     path: path.join(__dirname, 'web/js'), 
     filename: 'bundle.js', 
     publicPath: 'http://127.0.0.1:3000/static/' 
    }, 
    debug: true, 
    devtool: 'eval', 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin(), 
     devFlagPlugin 
    ], 
    module: { 
     loaders: [ 
      { 
       loaders: ["react-hot","babel-loader?plugins=transform-runtime&presets[]=es2015&presets[]=stage-0&presets[]=react"], 
       test: /\.js$/, 
       include: path.join(__dirname, 'app/Resources/react') 
      } 
     ] 
    } 
}; 

module.exports = config; 
/* 
new webpack.ProvidePlugin({ 
'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch' 
}) 
*/ 

webpack.dev-server.js

var webpack = require('webpack'); 
var WebpackDevServer = require('webpack-dev-server'); 
var config = require('./webpack.config'); 

new WebpackDevServer(webpack(config), { 
    publicPath: config.output.publicPath, 
    hot: true, 
    historyApiFallback: true, 
    quiet: false, 
    noInfo: false, 
    contentBase: "./assets" 
}).listen(3000, 'localhost', function (err, result) { 
    if (err) { 
     console.log(err); 
    } 
    console.log('Listening at localhost:3000'); 
}); 

webpack.production.config.js

var path = require('path'); 
var node_modules_dir = path.resolve(__dirname, 'node_modules'); 

var config = { 
    entry: [ 
     'babel-polyfill', 
     './app/Resources/react/app.js' 
    ], 
    output: { 
     path: path.join(__dirname, 'web/js'), 
     filename: 'bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       loaders: ["babel-loader?plugins=transform-runtime&presets[]=es2015&presets[]=stage-0&presets[]=react"], 
       test: /\.js$/, 
       include: path.join(__dirname, 'src/react') 
      } 
     ] 
    } 
}; 

module.exports = config; 
+0

你應該使用'npm run build' –

回答

1

你錯過run

npm run deploy 

run是所有腳本都需要。爲了幫助完成常見任務,npm知道如何使用幾個預先配置的腳本,例如啓動和測試,這就是爲什麼npm start等效於npm run start

+0

謝謝,它訣竅! –

相關問題