-
npm run eject 使用自带命令展开脚手架
-
修改/config/以下代码
// paths.js
+ const globby = require('globby');
+ const entriesPath = globby.sync([resolveApp('src') + '/pages/**/index.js']).map(filePath => {
let tmp = filePath.split('/');
let name = tmp[tmp.length - 2];
// 处理多层文件夹嵌套的页面
let pFolderIdx = tmp.indexOf('pages')
tmp = tmp.slice(pFolderIdx + 1, tmp.length - 1)
return {path: filePath, name: tmp.join('/')}
});
module.exports = {
- appIndexJs: resolveModule(resolveApp, 'src/index')
+ entriesPath
}
// /config/webpackDevServer.config.js
+ const files = paths.entriesPath;
+ const rewrites = files.map(({name, path}) => {
return {
from: new RegExp(`^\/${name}`),
to: `/${name}.html`
};
});
historyApiFallback: {
// Paths with dots should still use the history fallback.
// See https://github.com/facebook/create-react-app/issues/387.
disableDotRule: true,
+ rewrites
},
// /config/webpack.config.js
module.exports = function (webpackEnv) {
// 获取 entry
+ function getEntries(){
const entries = {};
const files = paths.entriesPath;
files.forEach(({name, path}) => {
entries[name] = [
isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),
path,
].filter(Boolean);
});
return entries;
}
+ const entries = getEntries()
+ const htmlPlugin = Object.keys(entries).map(name => {
return new HtmlWebpackPlugin(Object.assign({}, {
inject: true,
template: paths.appHtml,
chunks: [name, 0], // 只会插入名字中带 "0" 或者 带 name 的js 问题
filename: `${name}.html`,
title: `${name} html`,
}, isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true
}
}
: undefined));
});
}
return {
...
- entry: [
isEnvDevelopment &&
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appIndexJs,
].filter(Boolean),
+ entry:entries,
output: {
...
- filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/bundle.js',
+ filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/[name].bundle.js',
...
}
...
plugins: [
- new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appHtml,
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined
)
),
+ ...htmlPlugin,
]
}
// /scripts/start.js
// /scripts/build.js
- if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
process.exit(1);
}
+ paths.entriesPath.forEach(({path, name}) => {
if (!checkRequiredFiles([paths.appHtml, path])) {
process.exit(1);
}
})
- 处理 /public/index.html yarn add handlebars-loader --save
// webpack添加rule
{
test: /.hbs$/,
loader: require.resolve('handlebars-loader')
},