如何解决Webpack代码拆分-防止在构建中复制CSS文件
我已经用3.4.1版的Create-React-App引导了我的应用程序,并在使用Craco 5.6.4版对CRA提供的Webpack配置进行修改。由于我无法控制特定的客户期望,因此我需要使用build/js/main.js
和build/css/main.css
文件结构。通过Craco,我设法根据需要修改了文件输出,除了我最终得到了添加了块哈希的CSS文件的另一个副本。
这是我的craco.config.js
:
const { POSTCSS_MODES } = require('@craco/craco');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
style: {
postcss: {
mode: POSTCSS_MODES.file,},webpack: {
configure: {
optimization: {
splitChunks: {
cacheGroups: {
default: false,runtimeChunk: false,plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1,}),new MiniCssExtractPlugin({
filename: 'css/[name].css',],output: {
filename: 'js/[name].js',};
...
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
60.31 KB build/js/main.js
66 B build/static/css/main.0cb9b881.css
57 B build/css/main.css
...
(是的,目前CSS文件中没有规则,这说明它的大小很小。)
我的目标是消除创建第二个文件build/static/css/main.0cb9b881.css
。
我尝试对配置进行许多更改,包括https://github.com/webpack-contrib/mini-css-extract-plugin#extracting-all-css-in-a-single-file,但无济于事。我可以使用MiniCssExtractPlugin生成想要的CSS文件来指定文件名,并可以使用标准的Webpack output
文件名生成单个JS包。这是一个未弹出的CRA生成的应用程序,因此,我猜测内置的Webpack配置中有某种机制可以生成额外的文件,而我只需要在Craco配置中覆盖它即可。如果有人确切知道需要重写哪些位,我将非常感谢您的帮助!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。