over 3 years ago

修正前

...
..
.
import * as actions from '../actions';
import { NAME } from '../constants';
import makeGetAllState from '../selectors';
import ValidateForm from '../../HOC/ValidateForm';
...
..
.

多了一些 ../ 及 ../../ 的相對路徑設定

追加 Webpack 的 modulesDirectories 設定來減少這類的相對路徑

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: "http://localhost:8081/",
    filename: "bundle.js"
  },
  module: {
    ...
    ..
    .
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    modulesDirectories: ['.', 'node_modules'],
  },
  ...
  ..
  .
};

修正後

...
..
.
import * as actions from 'actions';
import { NAME } from 'constants';
import makeGetAllState from 'selectors';
import ValidateForm from 'HOC/ValidateForm';
...
..
.

變得清爽多了 XD

參考網址
http://davidboyne.co.uk/2016/04/29/react-webpack-gem.html

← 練習 React higher order components 驗證表單 使用 webpack code splitting 整合 react-router 和 React →
 
comments powered by Disqus