Question

使用我当前的node和webpack配置，我可以运行dev-server并开发我的应用程序。

但我无法创建可用于在我的网站上进行部署的静态bundle.js。

如何配置我的webpack.js文件和package.json命令以使其构建所需的捆绑文件？

当我运行npm build时，没有任何反应当我运行npm deploy时，我收到以下错误消息：

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;

Answer 1

你错过了run

npm run deploy

所有脚本都需要

run。为了帮助完成常见任务，npm知道如何使用多个预先配置的脚本，例如启动和测试，这就是npm start等同于npm run start的原因。

如何构建静态文件以在部署

1 个答案: