webpack+nodemon 实现热跟新问题

Question

问题描述:

此项目前端采用 ES6、React、jsx,后端采用 node 搭建服务,目前通过(webpack && nodemon app.js)能实现修改代码webpack自动打包;但是前端页面并没有同步,需要重新输入刚才那一行命令。

我想要问的是如何用一条命令完成 webpack 自动编译，并且服务自动重启
还有一个问题是我配置了 jquery 插件,但是我在 jsx 页面使用的时候还是需要通过import 引入，这是怎么回事

我个人觉得有可能是 app.js 没弄好，我把代码贴上:

//app.js
const express = require("express"),
    path = require('path'),
    webpack = require("webpack"),
    webpackDevMiddleware = require("webpack-dev-middleware"),
    webpackHotMiddleware = require("webpack-hot-middleware"),
    webpackConfig = require("./webpack.config");
const app = express();
const dll = webpack(webpackConfig);
const compiler = webpack(webpackConfig);

app.use(webpackDevMiddleware(compiler, {
    // publicPath与webpack.config.js保持一致
    publicPath: webpackConfig.output.publicPath,
    noInfo: false,
    stats: {
        colors: true
    }
}));
app.use(webpackHotMiddleware(compiler));
app.use("/",function(req,res){
  res.render("index");
});
const reload = require('reload');
const http = require('http');
const server = http.createServer(app);
reload(app);
server.listen(config.port, function(){
    console.log("The Server Connect,The port is "+config.port);
}); 

以下是 webpack.config.js配置:

var path = require("path"),
webpack = require("webpack");

module.exports = {
        devtool:"source-map",
        entry : {
            index : "./public/javascript/main"
        },
        output : {
            path : path.resolve(__dirname,"./public/dist"),
            publicPath : "dist/",
            filename : "[name].js"
        },
        resolve: {
            extensions: ['.js', '.jsx', '.css'], //后缀名自动补全
        },
        devServer: {
            host: "0.0.0.0",
            port: "8088",
            contentBase : path.resolve(__dirname, '/views'),  //设置根目录
            inline: true,//表示热跟新
            hot: true,
            progress: true,
            historyApiFallback: true
        },
        resolveLoader: {
           moduleExtensions: ["-loader"]
        },
        module : {
            rules: [{
            test: /\.jsx$/,
            use: [{
                loader : "babel?compact=false&presets[]=es2015&presets[]=react&plugins[]=transform-object-rest-spread",
                // include :path.join(__dirname,"./public/javascript/main")
            }],
            exclude : "/node_modules/"
          },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
                exclude:'/node_modules/'
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'img/[name]_[hash:7].[ext]'
                },
                exclude:'/node_modules/'
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'fonts/[name].[hash:7].[ext]'
                },
                exclude:'/node_modules/'
            }]
        },
        plugins : [
            new webpack.optimize.CommonsChunkPlugin("common"),// 默认会把所有入口节点的公共代码提取出来,生成一个common.js
            new webpack.ProvidePlugin({
                    $: 'jquery',
                    jQuery: 'jquery',
                    'window.jQuery': 'jquery',
                    'window.$': 'jquery',
            }),
            new webpack.NoEmitOnErrorsPlugin(),
            // new webpack.NotifierPlugin({excludeWarnings: true}),
            new webpack.HotModuleReplacementPlugin(),
            new webpack.LoaderOptionsPlugin({
                options: {
                htmlLoader: {
                    whateverProp: true
                }
                }
            }),
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': '"development"'
            })
        ]
    };

package.json部分配置:

    "devDependencies": {
        "babel-cli": "^6.24.1",
        "babel-core": "^6.25.0",
        "babel-loader": "^7.1.1",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-0": "^6.24.1",
        "cross-env": "^5.0.1",
        "css-loader": "^0.28.4",
        "file-loader": "^0.11.2",
        "jquery": "^3.2.1",
        "jsx-loader": "^0.13.2",
        "react-create-class": "^1.0.0",
        "react-hot-loader": "^1.3.1",
        "react-router": "^4.1.2",
        "react-transform": "0.0.3",
        "reload": "^2.0.1",
        "style-loader": "^0.18.2",
        "url-loader": "^0.5.9",
        "webpack": "^3.3.0",
        "webpack-dev-middleware": "^1.11.0",
        "webpack-dev-server": "^2.5.1",
        "webpack-hot-middleware": "^2.18.2"
  },
  "scripts": {
        "start": "webpack && nodemon app.js",
        "test": "echo \"Error: no test specified\" && exit 1"
  }
      

Answer 1

可以参考create-react-app的脚本配置．