Rodrigo: this article is Webpack CheatSheet | Webpack basis and practice listing, as part of the project code can refer to fe – boilerplate | technology stack front-end project template.

Path analysis

With the iteration of requirements and the improvement of functionality, our projects will become larger and more complex, and the directory hierarchy will continue to deepen. Take the organization method of React project discussed in the React practice list as an example, we often divide it into components, containers, Services, apis, ducks, Store, I18N and other directories. If all are introduced in relative path, It might look something like this:

import React from 'react';
import { connect } from 'react-redux';

import { someConstant } from '. /.. /.. /config/constants';
import MyComponent from '. /.. /.. /.. /components/MyComponent';
import { myActionCreator } from '. /.. /.. /.. /ducks/someReducer';
Copy the code

No doubt, such numerous references inevitably lead to increased coupling between code, making it harder to refactor or optimize. With proper module partitioning, we want cross-module references to be in absolute paths, such as:

import React from 'react';
import { connect } from 'react-redux';
import { someConstant } from 'Config/constants';
import MyComponent from 'Components/MyComponent';
import { myActionCreator } from 'Ducks/someReducer';
Copy the code

Of course, we do not advocate the excessive use of absolute path import. For components with fixed relative relationships, relative path import should be preferred.

Webpack

As mentioned earlier, Webpack allows us to customize path resolution using resolve.alias:

module.resolve = {
  alias: {
    Config: path.resolve(__dirname, '.. '.'src'.'config'),
    Components: path.resolve(__dirname, '.. '.'src'.'components'),
    Ducks: path.resolve(__dirname, '.. '.'src'.'ducks'),
    Shared: path.resolve(__dirname, '.. '.'src'.'shared'),
    App: path.join(__dirname, '.. '.'src')}};Copy the code

VSCode

Development tool support is an inevitable factor, and the good news is that VSCode allows us to configure parsing rules in jsconfig.json, which are also recognized by auto-import tools like auto-import:

{
  "compilerOptions": {
    "target": "es2017"."allowSyntheticDefaultImports": false."baseUrl": ". /"."paths": {
      "Config/*": ["src/config/*"]."Components/*": ["src/components/*"]."Ducks/*": ["src/ducks/*"]."Shared/*": ["src/shared/*"]."App/*": ["src/*"]}},"exclude": ["node_modules"."dist"]}Copy the code

ESLint

ESLint is also an integral part of front-end development. We can use eslint-import-resolver-webpack to extend eslint-import module resolution. After installing the module using NPM, we can do the following:

---
settings:
  import/resolver: webpack  # take all defaults
Copy the code

Or specify a file name:

---
settings:
  import/resolver:
    webpack:
      config: 'webpack.dev.config.js'
      config-index: 1   # optional, take the config at index 1
Copy the code

For projects that do not use Webpack, consider using eslint-import-resolver-alias:

// .eslintrc.js
module.exports = {
  settings: {
    'import/resolver': {
      alias: {
        map: [['babel-polyfill'.'babel-polyfill/dist/polyfill.min.js'],
          ['helper'.'./utils/helper'],
          ['material-ui/DatePicker'.'.. /custom/DatePicker'],
          ['material-ui'.'material-ui-ie10']],extensions: ['.ts'.'.js'.'.jsx'.'.json']}}}};Copy the code

Jest

We can add the moduleNameMapper attribute to the Jest configuration item in package.json:

"jest": {
  "moduleNameMapper": {
    "^Config(.*)$": "<rootDir>/src/config$1",
    "^Components(.*)$": "<rootDir>/src/components$1",
    "^Ducks(.*)$": "<rootDir>/src/ducks$1",
    "^Shared(.*)$": "<rootDir>/src/shared$1",
    "^App(.*)$": "<rootDir>/src$1"
}
Copy the code

TypeScript

The configuration of TypeScript is similar to VSCode. Add the following configuration to the compilerOptions of tsconfig.json:

{
  "baseUrl": "."."paths": {
    "c-apis/*": ["src/apis/*"]."c-models/*": ["src/models/*"]."c-stores/*": ["src/stores/*"]."c-utils/*": ["src/shared/*"]}}Copy the code