-
Notifications
You must be signed in to change notification settings - Fork 8
/
next.config.js
81 lines (75 loc) · 2.54 KB
/
next.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
const webpack = require('webpack')
// const withImages = require('next-images') //ref:https://github.com/zeit/next.js/issues/1935 (next-optimized-images)
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
const SpritesmithPlugin = require('webpack-spritesmith')
const withImages = require('./config/next-images')
const { resolveApp, isProd } = require('./config/helper')
require('./config')
const { publicPath } = global.g_config
//或在.babelrc定义。ref:https://stackoverflow.com/questions/44161479/next-js-webpack-aliasing-component-folders-doesnt-work
const extendsAlias = {
'@root': resolveApp(''),
'@node_modules': resolveApp('node_modules'),
'@styles': resolveApp('src/assets/styles'),
'@images': resolveApp('src/assets/images'),
'@fonts': resolveApp('src/assets/fonts'),
'@components': resolveApp('src/components'),
'@pages': resolveApp('src/pages'),
'@scripts': resolveApp('src/scripts'),
'@store': resolveApp('src/store'),
}
const exportPathMap = {
'/': { page: '/' },
'/works': { page: '/works' },
'/tool': { page: '/tool' },
'/contact': { page: '/contact' },
}
module.exports = withImages({
exportPathMap: async function (res) {
return exportPathMap
},
exclude: [
resolveApp('src/assets/fonts/svg'),
resolveApp('src/assets/images/exclude'),
],
//ref:https://github.com/zeit/next.js/issues/7945#issuecomment-536137816
devIndicators: {
autoPrerender: false,
},
assetPrefix: isProd ? publicPath.slice(0, publicPath.length - 1) : '',
webpack(config, { isServer, buildId, ...rest }) {
config.resolve.alias = {
...config.resolve.alias,
...extendsAlias,
}
isServer && config.plugins.push(new ForkTsCheckerWebpackPlugin())
config.plugins.push(
new webpack.DefinePlugin({
BUILD_ID: JSON.stringify(buildId),
IS_CLIENT: JSON.stringify(!isServer),
}),
new SpritesmithPlugin({
src: {
cwd: resolveApp('src/assets/images/icons'),
glob: '*.png',
},
target: {
image: resolveApp('src/assets/images/exclude/sprite.[hash].png'),
css: resolveApp('src/assets/styles/sass/common/_sprites.scss'),
},
apiOptions: {
cssImageRef: '~@images/exclude/sprite.[hash].png',
},
})
)
//ref:https://www.pluralsight.com/guides/how-to-load-svg-with-react-and-webpack
config.module.rules.push({
test: /\.svg$/,
issuer: {
test: /\.(js|ts)x?$/,
},
use: ['@svgr/webpack', 'url-loader'],
})
return config
},
})