@xunhou/webpack

vscode

vscode 需添加以下插件

• Prettier (代码格式化)
• styled-jsx Language Server (css 私有化)
• vscode-styled-jsx (css 私有化)

css

views 组件里的 css 需在最外层有一个作用域 id, id 名与 views 目录名一致，小写。 只有需要复用的组件才需要把样式写到组件内，组件内的样式采用css私有化写法, 详见styled-jsx

component里组件一率采用私有化写法。

同时私有化写法应有固定的命名前缀 c-, 原因与css私有化的方式有关。

路由

路由路径统一在router/config里进行配置, webpack 会自动依据路由的 config 文件配置，进行分片打包。 原则上只需要分片的路由，即大页面才需要维护在 config 文件里，如果是页面内小的子路由，则应在 views 的 页面组件内使用 router-dom 设定。 config 配置中会有 hook 回调函数，用来做路由拦截，即在路由发生跳转前，进行一些操作，比如用户权限验证等。

  {
    path: '/home',
    title: '首页',
    exact: true,
    hook(props) {
      /*
        resolve(true) 直接加载相应页面
        也可以 resolve(<Com />) 一个组件，将用来展示该组件
        同时hook也可以接收参数，参数是当前路由信息
        也可以做一个跳转  props.history.push('/about')
      */
      return new Promise((resolve) => {
        setTimeout(() => resolve(true), 2000)
      })
    },
    component: () => import(/* webpackChunkName: "Home" */ '@views/Home')
  },

你可以有选择性的将路由放在指定容器内，而不是整个页面。 比如，你有一个固定的菜单，不想随路由变化而变化，可以在router/index.js自定制

const App = () => {
  let location = useLocation() // 通过hook获取location
  if (/^resume\/showresumedetail/.test(location.pathName)) {
    return (
      <>
        <Header type="simple" /> {/* 我是简头 不会随路由的变化而重新加载 */}
        <AsyncRouter config={config} /> {/* 我是通过config配置的路由 */}
      </>
    )
  } else {
    return (
      <>
        <Header />
        <AsyncRouter config={config} />
      </>
    )
  }
}

可使用命令

"scripts": {
  "start": "fet-service start",         // 编译
  "deploy": "zctl front_delay --env",   // 发布测试环境
  "build": "fet-service prd"              // 发布到青龙
  "fix": "fet-service fix",             // 格式化代码
  "svgo": "fet-service svgOptimizer",   // 压缩svg
  "clear": "fet-service clear",         // 清理缓存
},

start

最常用的命令, 编译并预览, 其中所有 ajax 请求会被代理到webpack.config.js里配置的后台地址上。 注意: 通过start, dev命令，css均会打包到js中，而不会抽出单独的css文件，这是因为MiniCssExtractPlugin与缓存插件存在冲突，所以只有在prd时，才会调用MiniCssExtractPlugin形成独立的css文件，如果需要测试，可通过prd方式查看css抽取情况。

deploy

会执行npm run build 然后发布对应的测试环境： npm run deploy qa67 / qa39

build

生成带版本号的文件

fix

使用 prettier 以及 eslint 格式化你的代码到标准格式

svgo

对 src 目录下所有的 svg 进行压缩。

clear

系统在编译时使用了缓存以达到下次编译速度更快的目的, 但有些时候缓存会造成你的更改不能及时更新, 目前已知 的情况都可以自动更新缓存, 但不排除有些情况会出现问题, 当你的修改没有生效时, 通过此命令清除缓存, 再 重新编译

webpack.config

对 webpack 进行配置。

output

output为对象时代表在默认值的基础上新增值

当output为函数时可覆盖默认配置, 如：

output({config, isDevj, isPrd, isHot}){
  return config
}

esLint

值为 true|false, 在编译时, 是否启用 eslint。

watchIgnored

watching 时忽略的目录, 可提高性能, 默认会忽略 node_modules 里除@xxx 下的所有文件。 默认配置

{
  watchIgnored: ['node_modules', 'asset-dev', 'asset'],
  watchInclude: ['node_modules/@xxx']  
}

babelLoaderInclude

babel 需要解析的目录, 同样这样儿限定也是为了提高性能。 默认只编译@xxx下的资源。

如果想编译其它资源

比如百川项目需要编译@xxx下的资源, 那么可以这么配置

{
  // ...
  babelLoaderInclude: ['node_modules/@xxxx']
  // ...
}

loader

新增loader

{
  loader: [
    {
      test: /\.jpg$/,
      use: [
        {
          loader: 'file-loader',
        },
      ],
    },
  ]
}

修改默认loader, 可使用function的形式, 把所有配置项返回再做修改， loaders代表默认loaders，每个loader会有个key属性，可根据key属性 覆盖指定loader。

loader(loaders, isPrd, isHot, isDev){
  return loaders
}

plugins

插件，正常添加一个插件可直接在数组里增加，若想完全覆盖默认的插件配置，可通过函数进行覆盖。

/*
  @plugins 当前编译环境下的默认配置,
  @allPlugins 为包含所有内置 plugins 的对象, 你可以根据需求进行自由拼装，然后返回。
  @isPrd,isHot,isDev 为 3 种编译环境(prd，start, dev)
*/
plugins({ plugins, isPrd, isHot, isDev, allPlugins }) {
  if (isPrd || isDev) {
    // 因为此插件会引发两次watch，所以只在生成文件时使用
    return [...plugins, new AntdDayjsWebpackPlugin()]
  }
  return [...plugins]
},

splitChunks

可设置将配置规则的内容打到一个文件中

你可以将经常用到的包合并到 common 中, 以此来避免重复打包。

同时所有以路由形式拆分打包的，都将遵循默认的 webpack 异步拆包标准。

详见 https://webpack.js.org/plugins/split-chunks-plugin/#optimizationsplitchunks

const transfer = (arr) => new RegExp(arr.map((v) => `[\\/]node_modules[\\/]${v}`).join('|'))
// ...

// 这些是默认配置
// {
//   'polyfill-vendors': {
//     chunks: 'all',
//     test: transfer(['core-js']),
//     priority: 10,
//     name: 'polyfill-vendors',
//     enforce: true
//   },
//   'react-vendors': {
//     chunks: 'all',
//     test: transfer([
//       'react',
//       'react-dom',
//       'prop-types',
//       '@hot-loader/react-dom',
//       'react-router-dom',
//       'axios',
//       'classnames',
//       'mobx',
//       'mobx-react-lite'
//     ]),
//     priority: 10,
//     name: 'react-vendors',
//     enforce: true
//   }
// }

splitChunks: {
  commonCss: {
    chunks: 'all',
    name: 'common',
    test: /\/src\/common\/css\/index\.less/,
    enforce: true
  },
  common: {
    chunks: 'all',
    test: transfer(['dayjs', 'nprogress', 'styled-jsx']),
    name: 'common',
    enforce: true
  }
},

eslint

eslint 规则请参考 https://alloyteam.github.io/eslint-config-alloy/ 根目录下.eslintrc.js 为 eslint 配置文件, 通过它可实现自己想要的规则。

其中几个规则与参考不同

//0 (off)  1(warning)  2(error)
'no-debugger': isPrd() ? 2 : 1,
'no-new': 0,
'no-param-reassign': 0,
'radix': 0,