还是之前的那个项目,做完国际化没多久,还没来得及划水,又有新的活了,移动端的兼容。考虑到后期的复杂度,需要做两套资源。具体的目标是:<代码>同一个URL,电脑打开就显示PC的那一套,M端打开就显示移动的页面>
移动:
PC:
输出之后的文件,相比之前的指数。html,多了一个额外的mobile.html。
最终的源代码目录:
具体的改造步骤如下:
<强>步骤1:弹出
在下之前图方便,直接用了<代码> create-react-app>
在终端执行:<代码>纱逐出>
<强>步骤2:修改webpack配置
原本的webpack.config.dev.js:
条目:[
require.resolve (' react-dev-utils/webpackHotDevClient '),
require.resolve (’。/polyfills '),
require.resolve (“react-error-overlay”),
paths.appIndexJs,
]，
输出:{
路径:paths.appBuild,
pathinfo:没错,
文件名:“静态/js/bundle.js”,
chunkFilename:“静态/js/[名字].chunk.js”,
publicPath: publicPath,
devtoolModuleFilenameTemplate:信息=比;
path.resolve (info.absoluteResourcePath),
},
需要修改为:
条目:{
指数:[
require.resolve (’。/polyfills '),
require.resolve (' react-dev-utils/webpackHotDevClient '),
paths.appIndexJs,
]，
手机:(
require.resolve (’。/polyfills '),
require.resolve (' react-dev-utils/webpackHotDevClient '),
路径。appSrc +/移动/index.js”,
]
},
输出:{
pathinfo:没错,
文件名:“静态/js/[名字].bundle.js”,
chunkFilename:“静态/js/[名字].chunk.js”,
publicPath: publicPath,
devtoolModuleFilenameTemplate:信息=比;
path.resolve (info.absoluteResourcePath)。替换(/\ \/g, '/'),
},
可能需要注意的几点:
<李>条目从原来的数组扩展为对象,每个关键代表一个入口。
<李>中输出的文件名要区分输出名,可增加[名字]变量,这样会根据条目分别编译出每个条目的js文件。
这样你就可以在<代码> src 目录下新起一个民目录开发新的水疗:
<强>步骤3:生成多个html入口文件
Webpack配置多入口后,只是编译出多个入口的Js,入口的HTML文件也需要配置,可以用HtmlWebpackPlugin来生成。
<代码> webpack.config.dev.js 原配置:
//生成一个索引。html的文件& lt; script>注入。
新HtmlWebpackPlugin ({
注射:没错,
块:“指数”,
模板:paths.appHtml,
}),
需要加多一个配置,改成:
//生成一个索引。html的文件& lt; script>注入。
新HtmlWebpackPlugin ({
注射:没错,
块:“指数”,
模板:paths.appHtml,
}），
新HtmlWebpackPlugin ({
注射:没错,
块:“移动”,
模板:paths.appHtml,
文件名:“mobile.html”,
}),
<李>每调一次HtmlWebpackPlugin生成一次HTML页面,这里有两个,所以就会多增加一个mobile.html节点。
<李>块:指明哪些webpack入口的js会被注入到这个HTML页面。如果不配置,则将所有条目的js文件都注入HTML。
<李>文件名:指明生成的HTML路径,如果不配置就是dist/index.html.mobile配置了新的文件名,避免与第一个入口相互覆盖。
