node.js - 公共文件夹未使用 react/webpack 编译

Question

不确定我哪里出错了，或者我是否缺少开发依赖项。但基本上，我正在从头开始设置一个反应应用程序，我希望我的资产（图像和 SCSS）、index.html ** 和 **app.js在“公共”文件夹中提供。

文件夹结构应该是这样的：

ReactApplication:
- config
- controllers
- lib
- models
- node_modules
- public
- src:
     - assets:
             - images
             - scss
     - components
     - app.js
     - index.html
- test
.bablerc
index.js
nodemon.json
package.json
webpack.config.js

我已经设置了我的 webpack 文件、index.json 和上面列出的所有其他内容。但是，没有 assets/app.js 正在公用文件夹中编译。

我不知道为什么不。我的应用程序可以 100% 正常运行并在节点/浏览器中运行。我没有收到任何错误，但我希望文件出现/编译在公用文件夹中。

我错过了什么？

我已经从现有项目中复制并粘贴了这个项目。那么我可能需要重新安装依赖项吗？

这是我的 webpack 文件：

const path = require('path');
console.log('path', path);
const webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpack = new HtmlWebpackPlugin({
  template: 'src/index.html',
  filename: 'index.html',
  inject: 'body'
});

const CopyWebpackPlugin = require('copy-webpack-plugin');
const CopyWebpack = new CopyWebpackPlugin([
  { from: './src/assets', to: 'assets' }
]);

const HotModuleReplcement = new webpack.HotModuleReplacementPlugin();

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve('public'),
    filename: 'app.js',
    publicPath: '/'
  },
  module: {
    loaders: [
      { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.css$/, loader: ['style-loader', 'css-loader'] },
      { test: /\.s(a|c)ss$/, loader: ['style-loader', 'css-loader', 'sass-loader'] },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
      { test: /\.(woff|woff2)$/, loader: 'url-loader?prefix=font/&limit=5000' },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
      { test: /\.jpe?g(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/jpeg' },
      { test: /\.gif(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/gif' },
      { test: /\.png(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/png' }
    ]
  },
  devServer: {
    contentBase: ['src'],
    watchContentBase: true,
    historyApiFallback: true,
    hot: true,
    inline: true,
    port: 8000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:4000', 
        secure: false
      }
    }
  },
  plugins: [HotModuleReplcement, HtmlWebpack, CopyWebpack]
};

这是我的 index.js：

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
// mongoose.plugin(require('mongoose-unique-validator'));
mongoose.Promise = require('bluebird');
const router = require('./config/router');
const errorHandler = require('./lib/errorHandler');

const { dbURI, port } = require('./config/environment');

const app = express();
app.use(express.static(`${__dirname}/public`));

mongoose.connect(dbURI);
app.use(bodyParser.json());

app.use('/api', router);
app.get('/*', (req, res) => res.sendFile(`${__dirname}/public/index.html`));

app.use(errorHandler);

app.listen(port, () => console.log(`Aye aye captain, pulling into port ${port}`));

module.exports = app;

包.json：

{
  "name": "react-webpack-setup",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start:client": "webpack-dev-server",
    "start:server": "nodemon",
    "test:server": "nyc mocha \"test/server/**/*_spec.js\" --require \"test/server/spec_helper\" --recursive --exit",
    "test:client": "mocha --require ignore-styles test/client/helper \"test/client/**/*_test.js\" --recursive --exit",
    "build": "webpack -p",
    "start": "yarn build && node index"
  },
  "author": "Students",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "chai": "^4.1.2",
    "copy-webpack-plugin": "^4.4.1",
    "css-loader": "^0.28.9",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "file-loader": "^1.1.8",
    "html-webpack-plugin": "^2.30.1",
    "ignore-styles": "^5.0.1",
    "jsdom": "^11.7.0",
    "mocha": "^5.0.5",
    "node-sass": "^4.7.2",
    "nyc": "^11.6.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.2",
    "supertest": "^3.0.0",
    "url-loader": "^0.6.2",
    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.1"
  },
  "dependencies": {
    "animate.css": "^3.6.1",
    "axios": "^0.18.0",
    "bcrypt": "^1.0.3",
    "bluebird": "^3.5.1",
    "body-parser": "^1.18.2",
    "bulma": "^0.6.2",
    "filestack-js": "^0.11.2",
    "filestack-react": "^1.3.9",
    "jsonwebtoken": "^8.2.1",
    "loadash": "^1.0.0",
    "method-override": "^2.3.10",
    "moment": "^2.22.0",
    "moment-timezone": "^0.5.14",
    "mongoose": "^5.0.13",
    "promises": "^0.2.5",
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-messages": "^1.3.2",
    "react-moment": "^0.7.0",
    "react-router-dom": "^4.2.2",
    "react-timestamp": "^4.4.0",
    "request-promise": "^4.2.2"
  }
}

标签： node.jsreactjswebpackcompilationpublic