Node.js Wepack 2解析别名在服务器端不起作用

Wepack 2解析别名在服务器端不起作用

我使用express服务器运行wepback中间件。如果在导入是相对的情况下启动服务器，则可以正常工作：

`import from '../../foobar/stuff'` 

当服务器已经运行并且初始服务器端渲染在内存中准备就绪时；如果我们更改组件中的导入，以使用以前通过webpack定义的resolve属性，它将起作用：

`import from 'foobar/stuff'`

同时，如果服务器停止，并使用最后一次更改重新运行，其中导入使用配置中定义的webpack resolve属性，则此操作将失败（触发找不到错误）

文件结构：

[root]
  node_modules
  webpack.config.js
  |____ src
  |____ src/js
  |____ src/js/modules/
  |____ src/js/modules/foobar/containers|components/**/*.js
  |____ src/js/modules/lorem/containers|components/**/*.js

express服务器似乎不知道如何解析webpack2resolve属性中定义的路径（即使我将webpackDevConfig文件传递给中间件）

下面是server.dev.js：

import express from 'express'
import path from 'path'
import superagent from 'superagent'
import chalk from 'chalk'

import React from 'react'
import { renderToString } from 'react-dom/server'
import { StaticRouter } from 'react-router'

import configureStore from './src/js/root/store'
import { Provider } from 'react-redux'

import MyApp from './src/js/modules/app/containers/app'

import Routes from './src/js/root/routes'

const myAppChildRoutes = Routes[0].routes
const app = express()
const port = process.env.PORT ? process.env.PORT : 3000
var serverInstance = null
var dist = path.join(__dirname, 'dist/' + process.env.NODE_ENV)
var config = null
const webpack = require('webpack')
const webpackHotMiddleware = require('webpack-hot-middleware')
const webpackDevConfig = require('./webpack.dev.config')
const compiler = webpack(require('./webpack.dev.config'))
var webpackDevMiddleware = require('webpack-dev-middleware')
const webpackAssets = require('./webpack-assets.json')

config = require('./config')

/**
 * Process error handling
 */
process.on('uncaughtException', (err) => {
  throw err
})

process.on('SIGINT', () => {
  serverInstance.close()
  process.exit(0)
})

app.set('views', path.join(__dirname, 'src'))
app.set('view engine', 'ejs')

app.use(webpackDevMiddleware(compiler, {
  noInfo: true,
  publicPath: webpackDevConfig.output.publicPath,
  stats: {
    colors: true,
    hash: false,
    version: true,
    timings: false,
    assets: false,
    chunks: false,
    modules: false,
    reasons: false,
    children: false,
    source: false,
    errors: true,
    errorDetails: true,
    warnings: true,
    publicPath: false
  }
}))

app.use(webpackHotMiddleware(compiler, {
  log: console.log
}))

/**
 * The Cross origin resource sharing rules
 */
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE')
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type')
  res.setHeader('Access-Control-Allow-Credentials', true)
  next()
})

/**
 * Health check
 */
app.use('/healthcheck', (req, res) => {
  res.json({
    'env': {
      'NODE_ENV': process.env.NODE_ENV
    }
  })
  res.end()
})

app.use('/api/test', (req, res) => {
  superagent
    .get('https://jsonip.com/')
    .end((err, response) => {
      if (err) {
        console.log('api test err', err)
      }
      res.send(response.body)
    })
})

app.use('/assets', express.static(dist))

app.get('*', (req, res) => {
  // (wip) migration to react-router v4 temporary solution
  // let matches
  // if (typeof routes.props.children !== 'undefined' && Array.isArray(routes.props.children)) {
  //   matches = routes.props.children.find((v) => {
  //     return v.props.path === req.url
  //   })
  // } else {
  //   matches = routes.props.children.props.path === req.url
  // }
  let matches = true
  if (!matches) {
    res.status(404).send('Not found')
  } else {
    const preloadedState = {'foobar': 1}
      // Create a new Redux store instance
    const store = configureStore(preloadedState)
      // Render the component to a string
    const myAppHtml = renderToString(<StaticRouter context={{}} location={req.url}>
      <Provider store={store}>
        <MyApp routes={myAppChildRoutes} />
      </Provider>
    </StaticRouter>)
      // Grab the initial state from our Redux store
    const finalState = store.getState()
    res.render('index', {
      app: myAppHtml,
      state: JSON.stringify(finalState).replace(/</g, '\\x3c'),
      bundle: webpackAssets.main.js,
      build: config.build_name,
      css: '/assets/css/main.min.css'
    })
  }
})

serverInstance = app.listen(port, (error) => {
  if (error) {
    console.log(error) // eslint-disable-line no-console
  }
  console.log(chalk.green('[' + config.build_name + '] listening on port ' + port + '!'))
})

此外，尝试包含自动解析的路径，但未成功：

module.paths.unshift(path.resolve(__dirname, 'src/js'))

process.env.NODE_路径为：

process.env.NODE_PATH Module {
  id: '.',
  exports: {},
  parent: null,
  filename: '/Users/johnColtrane/www/coolApp/server.js',
  loaded: false,
  children: [],
  paths:
   [ '/Users/johnColtrane/www/coolApp/src/js',
     '/Users/johnColtrane/www/coolApp/node_modules',
     '/Users/johnColtrane/www/node_modules',
     '/Users/johnColtrane/node_modules',
     '/Users/node_modules',
     '/node_modules' ] }

---

注意：有人建议改为

babel插件模块别名

，因为我想采用的方法存在一些问题。我会检查它，如果比这种方法更好，我会在这里发布。

我曾经遇到过同样的问题，并设法使用

process.env.NODE_PATH Module {
  id: '.',
  exports: {},
  parent: null,
  filename: '/Users/johnColtrane/www/coolApp/server.js',
  loaded: false,
  children: [],
  paths:
   [ '/Users/johnColtrane/www/coolApp/src/js',
     '/Users/johnColtrane/www/coolApp/node_modules',
     '/Users/johnColtrane/www/node_modules',
     '/Users/johnColtrane/node_modules',
     '/Users/node_modules',
     '/node_modules' ] }