@xunhou/webpack v1.0.4
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,